延迟加载或Inview

我正在使用同位素，我试图让延迟加载http://www.appelsiini.net/projects/lazyload工作。但是我也参考了一个名为Inview和ImagesLoaded的插件。延迟加载或Inview

我无法让他们工作。我的困惑在于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'); 
    } 
});

来源

2012-09-30 J.D

的图片加载插件包含在同位素，看到the documentation。你通常使用Paul Irish的无限滚动插件来实现它。至于延迟加载，SO right here和其他地方有答案。但是，如果你正确地实现了无限滚动，并且你的图像被优化用于使用ImageOptim或其他方法进行快速加载，那么无论如何你可能都不需要延迟加载。

来源

2012-09-30 14:51:24 Systembolaget

延迟加载或Inview

回答

相关问题