1

I am using Isotope, i am trying to get lazy load http://www.appelsiini.net/projects/lazyload working. however i also reference a plugin called Inview and ImagesLoaded.

I am having trouble getting them to work. my confusion lies in the difference between Inview and Lazy Loading! do these two plugins carry out the same function?

I initially was following this guide http://www.haizumdesign.com/masonry-infinite-scroll-inview-a-tale-of-3-plugins/ but i removed infinite scroll because it freezes my browser. I thought Inview and images loaded was enough to do lazy loading, but then i came across the lazy loading website and i got all confused.

Also it seems that isotope already comes with imagesloaded, so should i stop loading a separate js file?

私を助けてください、以下は私の同位体設定です

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').imagesLoaded(function(){
    $('#big_container').isotope({
    itemSelector : '.item',
    layoutMode : 'masonry',
    masonry: {
        columnWidth: 1,
    },
    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 );
          }
    }
    });
    }); //close imagesLoaded
    $('#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;
    });
});
$(document).on("inview", ".item", function(e) {
    var $this = $(this);
    if(!$this.hasClass('loaded')) {
        $this.addClass('loaded');
        $this.css('visibility','visible').hide().fadeIn('slow');
    }
});
4

1 に答える 1

0

Images Loaded プラグインは Isotope に含まれています。ドキュメントを参照してください。通常、Paul Irish の Infinite Scroll プラグインを使用して実装します。遅延読み込みについては、ここや他の場所で SO に関する回答があります。しかし、無限スクロールを正しく実装していて、画像が ImageOptim などで高速読み込み用に最適化されている場合は、おそらく遅延読み込みは必要ありません。

于 2012-09-30T14:51:24.627 に答える