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

Question

我的懒惰负载目标定位有问题。每次我过滤我的列表（使用Mix-It Up插件）时，我的图像都不会向下滚动加载，因为LazyLoad的目标是它的旧位置。

如何强制Lazylod正确定位我的图像？

Answer 1

旧的jquery lazylod并不是为动态网页而设计的。通常，插件只检查用户滚动。此外，它在运行时性能和内存管理方面也存在一些缺陷。

我创建了一个laziloader，它与所有其他laziloeder完全不同：它使用a）高效的代码，b）自动检测当前和未来DOM元素的任何可见性更改。

下面是一个带有mixitup的简单演示：http://codepen.io/aFarkas/pen/wByKeL

您需要做的一切就是添加lazySizes脚本并编写以下标记：

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

Answer 2

一个选项可能是使用MixItUp的回调功能。这是MixItUp文档，https://mixitup.kunkalabs.com/docs/#group-回调。我使用onMixEnd来调用我的懒惰加载功能。这应该确保在延迟加载功能接管之前，所有图像都在正确的位置。

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