Question

我正在使用Isotope，我正在尝试延迟加载http://www.appelsiini.net/projects/lazyload。但是我也引用了一个名为Inview和ImagesLoaded的插件。

我无法让他们上班。我的困惑在于Inview和Lazy Loading之间的区别！这两个插件执行相同的功能吗？

我最初遵循本指南http://www.haizumdesign.com/masonry-infinite-scroll-inview-a-tale-of-3-plugins/，但我删除了无限滚动，因为它冻结了我的浏览器。我认为Inview和图片加载足以进行延迟加载，但后来我遇到了懒人加载网站，我感到很困惑。

似乎同位素已经带有imagesloaded，所以我应该停止加载一个单独的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

图像加载插件包含在同位素中，请参阅the documentation。您通常使用Paul Irish的Infinite Scroll插件实现它。至于延迟加载，SO right here和其他地方都有答案。但是，如果你正确地实现无限滚动并且你的图像已经过优化以便使用ImageOptim或其他任何东西快速加载，那么你可能不需要延迟加载。

延迟加载或Inview

1 个答案: