延迟加载和混合插件的问题答案

【问题标题】：Problems with Lazy Load and Mix It Up plugins延迟加载和混合插件的问题
【发布时间】：2014-10-17 19:34:13
【问题描述】：

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

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

【问题讨论】：

标签： javascript lazy-loading mixitup

【解决方案1】：

旧的 jquery 延迟加载并不是真正为动态网页设计的。一般来说，插件只检查用户滚动。此外，它在运行时性能和内存管理方面存在一些缺陷。

我创建了一个延迟加载器，它与所有其他延迟加载器真正不同：它使用 a) 高效代码和 b) 自动检测当前和未来 DOM 元素的任何可见性变化。

这是一个使用 mixitup 的简单演示： http://codepen.io/aFarkas/pen/wByKeL

您需要做的就是添加lazySizes script 并编写以下标记：

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

【讨论】：

使用的出色库。从现在开始将在很多项目中使用它。

【解决方案2】：

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

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

【讨论】：

这种方法的问题是，每次调用排序/过滤函数时，都会创建一个对这些元素有强引用的新延迟加载实例，随着时间和/或在很多项目的情况下，应用程序/页面会越来越慢，消耗越来越多的内存。
亚历山大说得好。我想今晚我将不得不玩弄你的延迟加载应用程序。从我目前看到的来看，看起来很酷。谢谢！