延迟加载或Inview

Question

我正在使用Isotope，我正在尝试让延迟加载http://www.appelsiini.net/projects/lazyload工作。不过，我还引用了一个名为Inview和ImagesLoaded的插件。

我在让他们工作时遇到了困难。我的困惑在于Inview和延迟加载的区别！这两个插件是否执行相同的功能？

我最初是按照这个指南http://www.haizumdesign.com/masonry-infinite-scroll-inview-a-tale-of-3-plugins/，但我删除了无限滚动，因为它冻结我的浏览器。我认为Inview和图片加载就足以完成延迟加载，但后来我遇到了延迟加载网站，我完全搞混了。

而且看起来同位素已经加载了图像，所以我应该停止加载一个单独的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

图像加载插件包含在Isotope中，请参见the documentation。你通常用Paul爱尔兰的无限滚动插件来实现它。至于延迟加载，在SO right here和其他地方都有答案。但是，如果您正确地实现了无限滚动，并且您的图像针对ImageOptim或其他工具的快速加载进行了优化，那么您可能无论如何都不需要延迟加载。