LazyLoad图像直到滚动后才出现
我正在使用jQuery的lazyload插件。
它工作正常，除了一个问题：在滚动之前，图像src不会被换出数据原件。 一旦你滚动，甚至一点点，图像加载 – 但我需要它们在页面准备好时加载。
注意：这纯粹是Chrome / Safari问题。 我在Firefox或Opera，甚至IE9中都没有这个问题。
我试过按照这篇文章的建议： http ： //sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/其中说明基本的jQuery库具有以下function：没有插件需要延迟加载。 这似乎并非如此，因为图像只是在初始页面加载时加载。
任何见解都非常感谢！
您的图像很可能没有设置宽度和高度。 Webkit浏览器将在document.ready上看到零宽度和高度的图像。 这意味着jQuery会认为图像不可见。 Lazy Load默认忽略不可见的图像。 你有三个选择。
- 修复HTML以在图像上具有宽度和高度属性。
- 将
skip_invisible设置为false。 - 使用插件的至少版本1.8.3 。
$(window).resize();
在我的情况下帮助了我。
解决了我自己的问题：你必须在图像上设置高度和宽度！
试试这个：
$('img.lazy').lazyload(); $(window).scroll();
我有一个类似的问题。 阈值选项为我解决了它：
$("img.lazy").lazyload({ threshold : 400 });
对我来说问题是我ready调用$('img.lazy').lazyload()
改为设置内部load 。
$(window).load(function(){ $('img.lazy').lazyload() });
您可以模仿/触发滚动事件以触发对页面加载的影响： http ： //api.jquery.com/scroll/
我使用了延迟加载jquery插件，但加载是一个问题。 （即。）它在crome浏览器中更流畅。 但遗憾的是，它在mozilla fire fox中无法正常工作。 我从mozilla fire fox收到此通知（此页面上的脚本可能正忙，或者它可能已停止响应。您可以立即停止脚本，在调试器中打开脚本，或让脚本继续运行。）。 所以回答任何更好的想法，以避免这个错误。
我遇到过同样的问题。
解决了这个问题：
只需从页面上的第一个图像中替换“懒惰”类。
😉