jQuery 直到滚动后才出现 LazyLoad 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13535597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LazyLoad images not appearing until after a scroll
提问by user1380540
I'm using the lazyloadplugin for jQuery.
我正在使用jQuery的延迟加载插件。
It's working fine, except one issue: The images src is not being swapped out for the data-original until you scroll. Once you scroll, even a tad, the images load - but I need them to load right when the page is ready.
它工作正常，除了一个问题：在滚动之前，图像 src 不会被替换为原始数据。一旦你滚动，甚至一点点，图像就会加载 - 但我需要它们在页面准备好时加载。
A note: This is purely a Chrome/Safari Issue. I am not having this issue in Firefox or Opera, or even IE9.
注意：这纯粹是 Chrome/Safari 问题。我在 Firefox 或 Opera，甚至 IE9 中都没有这个问题。
I've tried following the suggestion of this post: http://sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/Which states that the basic jQuery library has the capabilities of lazy loading without a plugin needed. This seemed not to be so, as the images just all loaded on initial page load.
我尝试按照这篇文章的建议进行操作：http: //sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/其中指出基本的 jQuery 库具有以下功能不需要插件的延迟加载。这似乎并非如此，因为图像只是在初始页面加载时加载。
Any insights are greatly appreciated!
任何见解都非常感谢！
采纳答案by user1380540
Solved my own problem: You HAVE to set a height and a width on the image!
解决了我自己的问题：您必须在图像上设置高度和宽度！
回答by Mika Tuupola
Your images most likely do not have width and height set. Webkit browsers will see images on document.ready with zero width and height. This means jQuery will consider the images invisible. Lazy Load ignores invisible images by default. You have three options.
您的图像很可能没有设置宽度和高度。Webkit 浏览器将在 document.ready 上看到宽度和高度为零的图像。这意味着 jQuery 会认为图像不可见。默认情况下，延迟加载会忽略不可见的图像。你有三个选择。
- Fix HTML to have width and height attributes on images.
- Set
skip_invisibletofalse. - Use atleast version 1.8.3 of the plugin.
回答by Cullen SUN
$(window).resize();
Helped me in my case.
在我的情况下帮助了我。
回答by Konstantin Lekh
Try this:
尝试这个：
$('img.lazy').lazyload();
$(window).scroll();
回答by theisof
I had a similar issue. The threshold option solved it for me:
我有一个类似的问题。阈值选项为我解决了这个问题：
$("img.lazy").lazyload({
threshold : 400
});
回答by Philip
For me the problem was that I called $('img.lazy').lazyload()in ready
对我来说，问题是我打$('img.lazy').lazyload()进来的ready
Set inside loadinstead.
设置在里面load。
$(window).load(function(){
$('img.lazy').lazyload()
});
回答by Amos Crist
I used lazy loading jquery plugin but the loading is making an issue. (ie.) it is smoother in crome browser. But unfortunately it is not working properly in mozilla fire fox. i'm getting this notification from mozilla fire fox (A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.). So just reply any better idea to avoid this bug.
我使用了延迟加载 jquery 插件，但加载出现了问题。（即）它在 crome 浏览器中更流畅。但不幸的是，它在 mozilla fire fox 中无法正常工作。我从 mozilla fire fox 收到此通知（此页面上的脚本可能正忙，或者它可能已停止响应。您可以立即停止脚本，在调试器中打开脚本，或让脚本继续运行。）。因此，只需回复任何更好的想法即可避免此错误。
回答by Victor Z
I had the same issue.
我遇到过同样的问题。
Solved that way:
是这样解决的：
Just replace the "lazy" class from the first images on the page.
只需从页面上的第一个图像中替换“懒惰”类。
;-)
;-)
回答by Martin Lyne
You could mimic/trigger a scroll event to trigger the effect on pageload: http://api.jquery.com/scroll/
您可以模仿/触发滚动事件来触发对页面加载的影响：http: //api.jquery.com/scroll/
