LazyLoad在加载时加载所有图片

问题描述 投票:2回答:2

想不到怎么刚开始就出现这种情况,这几个月都好好的...

http:/www.lizhess.comshop

观察你的chromeff中的net标签--它在页面上一秒钟后就加载了250多个图片请求......它说是jquery发起的这些请求......。

这几乎就像LL中的某些东西对哪些图片是可见的感到困惑...... 我试了很多选项都没有用。

使用这个LL : http:/www.appelsiini.netprojectslazyload并使用此代码。

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

有什么办法吗?

jquery lazy-loading
2个回答
3
投票

看起来是 event 设置。 由 默认 它被设定为 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

所以也许你可以尝试延迟调用unveil。


1
投票

toopola:

当页面加载时,你的图片很可能都在视口中。例如,当HTML没有设置图片的尺寸时,就会发生这种情况。

这就是我的问题。不得不给图片设置最小尺寸,这样它们在加载前就不会都是0px高了。

© www.soinside.com 2019 - 2024. All rights reserved.