11

同位体と遅延読み込みを連携させるためにかなりの時間を費やしました。

問題: ユーザーが下にスクロールすると遅延読み込みが機能しますが、ユーザーがフィルターを使用すると、アイテムは一番上に表示されますが、画像は読み込まれません。

ここに同じ問題を抱えている人がいますが、彼はそれを修正したようです。私はいくつかのことを試しましたが、それでもうまくいきませんでした。

ここに議論があります https://github.com/tuupola/jquery_lazyload/issues/51

助けてくれてどうもありがとう

私が使用しているコードは次のとおりです。

jQuery(document).ready(function($) {
    $('#big_container .media_block img').each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });
    $('#big_container').isotope({
    itemSelector : '.item',
    layoutMode : 'masonry',
    masonry: {
        columnWidth: 5,
    },
    sortBy : 'date',
    sortAscending : false,
    getSortData : {
        date : function ( $elem ) {
            return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
        },
        views : function( $elem ) {
            return parseInt( $elem.attr('data-views'), 10 );
          },
        //featured : function ( $elem ) {
        // return $elem.attr('data-featured');
        //  },
        rates : function( $elem ) {
            return parseInt( $elem.attr('data-rates'), 10 );
          },
        comments : function( $elem ) {
            return parseInt( $elem.attr('data-comments'), 10 );
          }
    }

    });

    $('#sort-by li a').click(function(){
        var $this = $(this);
        if ($(this).parent().hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents();
        $optionSet.find('.selected').removeClass('selected');
           $this.addClass('selected');
          var sortName = $(this).attr('href').slice(1);
          $('#big_container').isotope({ sortBy : sortName });
          return false;
    });
});
4

1 に答える 1

20

同位体のソート/フィルタリングを遅延ロードで機能させるには、次のことを行う必要があります。

jQuery(document).ready(function($) {
    var $win = $(window),
        $con = $('#container'),
        $imgs = $("img.lazy");

    $con.isotope();

    $con.on('layoutComplete', function(){
        $win.trigger("scroll");
    });

    $imgs.lazyload({
        failure_limit: Math.max($imgs.length - 1, 0)
    });
});

説明

ドキュメントによると ( http://www.appelsiini.net/projects/lazyload )

ページをスクロールした後、Lazy Load はアンロードされた画像をループします。ループでは、画像が表示されているかどうかを確認します。デフォルトでは、最初の画像 (非表示) が見つかったときにループが停止します。これは、次の仮定に基づいています。ページ上の画像の順序は、HTML コードの画像の順序と同じです。一部のレイアウトの仮定では、これは間違っている可能性があります。

同位体の並べ替え/フィルター処理されたリストでは、ページの順序が HTML とは明らかに異なるため、failure_limit.

ご覧のとおり、failure_limit として使用できるように jQuery オブジェクトを保存しますlength-1。なぜlength-1.

if (++counter > settings.failure_limit) {
    return false;
}

他のイベントの遅延ロード

スクロールでレイジーロードをトリガーしない場合は、使用しているイベントの「スクロール」トリガーを交換する必要があります。

デモ

http://jsfiddle.net/arthurc/ZnEhn/

サイトのコード

再利用する必要があるため、いくつかの jQuery オブジェクトを変数に格納しました。

jQuery(document).ready(function($) {
    var $window = $(window);
    var $images = $('#big_container .media_block img');
    var $big_container = $('#big_container');

    $images.each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });


    $big_container.isotope({
        itemSelector : '.item',
        layoutMode : 'masonry',
        masonry: {
            columnWidth: 5,
        },
        sortBy : 'date',
        sortAscending : false,
        getSortData : {
            date : function ( $elem ) {
                return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
            },
            views : function( $elem ) {
                return parseInt( $elem.attr('data-views'), 10 );
              },
            //featured : function ( $elem ) {
            // return $elem.attr('data-featured');
            //  },
            rates : function( $elem ) {
                return parseInt( $elem.attr('data-rates'), 10 );
              },
            comments : function( $elem ) {
                return parseInt( $elem.attr('data-comments'), 10 );
              }
        }

    });


    $big_container.on('layoutComplete', function(){
        $win.trigger("scroll");
    });

    $('#sort-by li a').click(function(){
        var $this = $(this);
        if ($(this).parent().hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents();
        $optionSet.find('.selected').removeClass('selected');
           $this.addClass('selected');
          var sortName = $(this).attr('href').slice(1);
          $big_container.isotope({ sortBy : sortName });
          return false;
    });


    $images.lazyload({
        failure_limit : Math.max($images.length-1, 0);
    })
});
于 2012-12-17T17:40:42.623 に答える