延遲加載或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

回答

相關問題