9

我正在使用 jQuery 的延迟加载插件。

它工作正常，除了一个问题：在您滚动之前，图像 src 不会被替换为原始数据。一旦滚动，甚至一点点，图像就会加载 - 但我需要它们在页面准备好时立即加载。

注意：这纯粹是 Chrome/Safari 问题。我在 Firefox 或 Opera，甚至 IE9 中都没有这个问题。

我已经尝试按照这篇文章的建议： http ://sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/ 其中指出基本的 jQuery 库具有以下功能无需插件的延迟加载。这似乎并非如此，因为图像只是在初始页面加载时加载的。

非常感谢任何见解！

4

9 回答 9

16

您的图像很可能没有设置宽度和高度。Webkit 浏览器将在 document.ready 上看到宽度和高度为零的图像。这意味着 jQuery 将认为图像是不可见的。默认情况下，延迟加载会忽略不可见的图像。你有三个选择。

  1. 修复 HTML 以在图像上具有宽度和高度属性。
  2. 设置skip_invisible为false。
  3. 使用插件的至少 1.8.3 版本。
于 2012-12-23T10:48:25.983 回答
6 
 $(window).resize();

在我的情况下帮助了我。

于 2013-06-18T14:15:27.590 回答
4

解决了我自己的问题：您必须在图像上设置高度和宽度！

于 2012-11-23T21:07:35.687 回答
3

试试这个：

$('img.lazy').lazyload();
$(window).scroll();
于 2014-01-16T00:04:05.993 回答
3

我有一个类似的问题。阈值选项为我解决了这个问题：

$("img.lazy").lazyload({
    threshold : 400
});
于 2014-05-01T08:33:17.960 回答
1

$('img.lazy').lazyload()对我来说，问题是我打电话ready

load改为设置在里面。

$(window).load(function(){
  $('img.lazy').lazyload()
});
于 2015-12-18T14:43:43.427 回答
0

您可以模仿/触发滚动事件以触发页面加载效果：http: //api.jquery.com/scroll/

于 2012-11-23T20:56:26.567 回答
0

我使用延迟加载 jquery 插件，但加载出现问题。（即）它在 crom 浏览器中更流畅。但不幸的是，它在 Mozilla fire fox 中无法正常工作。我从 mozilla fire fox 收到此通知（此页面上的脚本可能正忙，或者它可能已停止响应。您可以立即停止脚本，在调试器中打开脚本，或让脚本继续。）。因此，只需回复任何更好的想法以避免此错误。

于 2016-05-19T06:48:01.027 回答
0

我遇到过同样的问题。

这样解决：

只需从页面上的第一张图片中替换“懒惰”类。

;-)

于 2017-01-15T21:19:56.487 回答