我的延迟加载目标定位有问题。每次我过滤我的列表(使用 Mix It Up 插件)时,我的图像都不会在向下滚动时加载,因为 LazyLoad 的目标是它的旧位置。
如何强制 Lazyload 正确定位我的图像?
我的延迟加载目标定位有问题。每次我过滤我的列表(使用 Mix It Up 插件)时,我的图像都不会在向下滚动时加载,因为 LazyLoad 的目标是它的旧位置。
如何强制 Lazyload 正确定位我的图像?
旧的 jquery 延迟加载并不是真正为动态网页设计的。一般来说,插件只检查用户滚动。此外,它在运行时性能和管理内存方面存在一些缺陷。
我创建了一个延迟加载器,它与所有其他延迟加载器真正不同:它使用 a) 高效代码和 b) 自动检测对当前和未来 DOM 元素的任何可见性更改。
这是一个带有 mixitup 的简单演示:http: //codepen.io/aFarkas/pen/wByKeL
您需要做的就是添加lazySizes 脚本并编写以下标记:
<img data-src="img.jpg" class="lazyload" />
一种选择可能是使用 MixItUp 的回调功能。这是 MixItUp 文档,https: //mixitup.kunkalabs.com/docs/#group-callbacks 。我使用 onMixEnd 来调用我的延迟加载功能。这应该确保在延迟加载功能接管之前所有图像都位于正确的位置。
$(document).ready(function () {
$('.container').mixItUp({
callbacks: {
onMixEnd: function () {
$("img.lazy").lazyload();
}
}
});
});