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

看起来是event设置。到default它被设置为scroll，看起来它会在滚动时加载所有图像。

在控制台中执行以下操作：

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

你会注意到它现在悬停时正常​​工作。所以我认为这只是造成问题的scroll事件。奇怪的是我相信threshold设置应该照顾这个，但我从来没有使用过这个插件，所以我不完全确定。

尽管如此，我希望这至少可以指出你正确的方向，你可以改变事件，或者错开你懒惰的img元素。

<强>更新

如果您使用unveil插件执行类似操作（在控制台中），它实际上似乎正常工作（在Firefox中，没有占位符）：

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

所以也许你可以尝试推迟推出的电话。

Answer 2

toopola：

页面加载时，您的图像很可能全部在视口中。例如，当HTML未设置图片尺寸时，就会发生这种情况。

那是我的问题。必须为图片设置最小尺寸，以使它们在加载之前并非都为0px高。