延迟加载或Inview

Question

我正在使用同位素，我试图让懒惰加载http://www.appelsiini.net/projects/lazyload工作。

我有麻烦让他们工作。我的困惑在于Inview和Lazy Loding之间的区别！这两个插件执行相同的功能吗？

我最初是遵循这个指南的http://www.haizumdesign.com/masonry-infinite-scroll-inview-a-tale-of-3-plugins/但我删除了无限滚动，因为它冻结了我的浏览器。我认为iView和加载的图像足以进行延迟加载，但后来我发现了延迟加载网站，我感到非常困惑。

此外，同位素似乎已经加载了图像，所以我应该停止加载单独的js文件吗？

请帮助我，以下是我的同位素配置

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');
    }
});

Answer 1

图像加载插件包含在同位素中，参见文档。你通常用Paul Irish的无限卷轴插件来实现。至于延迟加载，这里和其他地方都有答案。但是，如果你正确地实现了无限滚动，并且你的图片已经通过ImageOptim或其他工具进行了快速加载的优化，你可能不需要延迟加载。