jquery - LazyLoad 在加载时加载所有图像

Question

我无法想象这是如何开始发生的，几个月来一直运行良好......

http://www.lizhess.com/shop/

在 chrome/ff 中观察您的网络选项卡 - 它在页面上一秒钟后加载 250 多个图像请求...它表示 jquery 发起了这些请求...

就好像 LL 中的某些内容对哪些图像可见感到困惑......我尝试了很多选项都无济于事。

使用此 LL:http://www.appelsiini.net/projects/lazyload并使用此代码:

jQuery("img.lazy").lazyload({
effect: "fadeIn",
  effectspeed: 200,
  failure_limit: Math.max(jQuery("img").length - 1, 0)
});

有什么想法吗？

Answer 1

看起来像是事件设置。通过default它被设置为scroll，看起来它加载了滚动上的所有图像。

在控制台中，如果您这样做:

jQuery('img.lazy').attr('src', ''); //Reset the images
jQuery('img.lazy').lazyload({event: 'hover'}); //Rebind our own

您会注意到它现在在悬停时可以正常工作。所以我相信这只是 scroll 事件引起的问题。奇怪的是，我相信 threshold 设置应该解决这个问题，但我从未使用过该插件，所以我不完全确定。

不过，我希望这至少能为您指明正确的方向，并且您可以更改事件，或者错开您延迟加载的 img 元素。

更新

如果您对揭幕插件(在控制台中)执行类似的操作，它实际上似乎可以正常工作(在 Firefox 中，没有占位符):

jQuery('img.lazy').attr('src', '');
jQuery('img.lazy').unveil(); //Images will now load as they are scrolled to

所以也许你可以尝试推迟揭幕电话。