懒惰加载和混合它插件的问题

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();  
      } 
     } 
    }); 
});