懶惰加載和混合它插件的問題

Question

我的懶惰加載目標定位有問題。 每次我過濾我的列表（使用Mix It Up插件），我的圖片將無法加載到scrolldown上，因爲LazyLoad的目標是舊的定位。

如何強制Lazyload正確定位我的圖像？

Answer 1

舊的jquery lazyload並不是真正用於動態網頁。一般來說，插件僅檢查用戶滾動。另外，它具有運行時性能和管理內存的一些缺陷。

我創建了一個與所有其他lazyloader完全不同的lazyloader：它使用a）高效代碼和b）自動檢測當前和未來DOM元素的可見性更改。

下面是一個簡單的演示與mixitup：你需要做的 http://codepen.io/aFarkas/pen/wByKeL

一切都是添加lazySizes script和寫入以下標記：

<img data-src="img.jpg" class="lazyload" /> 

Answer 2

一個選項可能是使用MixItUp的回調功能。這裏是MixItUp文檔，https://mixitup.kunkalabs.com/docs/#group-callbacks。我用onMixEnd來調用我的懶加載功能。這應該確保所有圖像在延遲加載功能接管之前處於正確的位置。

$(document).ready(function() { 
    $('.container').mixItUp({  
     callbacks: { 
      onMixEnd: function() { 
       $("img.lazy").lazyload();  
      } 
     } 
    }); 
});