Javascript 延迟加载不会加载可见图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11419537/
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
Lazy Load won't load visible images
提问by andy
I'm trying to use lazyload to only load images that are visible (because my site is responsive and some content is hidden with display:none to clients on a smaller screen).
我正在尝试使用lazyload 来仅加载可见的图像（因为我的网站是响应式的，并且某些内容通过 display:none 隐藏在较小屏幕上的客户端）。
Basically, lazyload works, but ONLY after I scroll the page a little.
基本上，lazyload 可以工作，但只有在我稍微滚动页面之后。
This is the lazy load settings I'm using, and even after setting the threshold to 2000px (more than the entire page height) it still only loads images after the user scrolls the page (even 1 px). This bug only appears in webkit browsers.
这是我正在使用的延迟加载设置，即使将阈值设置为 2000 像素（超过整个页面高度），它仍然只在用户滚动页面（甚至 1 像素）后加载图像。此错误仅出现在 webkit 浏览器中。
$(document).ready(function () {
$("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
回答by pozs
I think it could be some misbehavior of thresholdparameter, but still you can manually fire the loading according to this page:
我认为这可能是threshold参数的一些不当行为，但您仍然可以根据此页面手动触发加载：
<script type="text/javascript">
$(document).ready(function () {
$("img")
.lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
})
.trigger("lazyload");
});
</script>
but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.
但是如果你想加载所有图像ready，为什么需要lazyload呢？你可以只使用$.animate.
回答by Nemke
Just add this after .lazyload() and it will trigger scroll and show images
只需在 .lazyload() 之后添加它，它就会触发滚动并显示图像
$(window).trigger('scroll');
回答by Mika Tuupola
You need to set width and height for you images.
您需要为图像设置宽度和高度。
If width and height are not set jQuery will report images invisible in Webkit browsers on document.load event. When skip_invisibleis trueLazy Load will ignore the images, meaning it wont try to figure out whether image should be loaded or not. They will load first time you scroll.
如果没有设置宽度和高度，jQuery 将在 document.load 事件上报告在 Webkit 浏览器中不可见的图像。如果skip_invisible是true延迟加载会忽略图像，这意味着它不会揣摩图像是否应被加载与否。他们将在您第一次滚动时加载。
If you set skip_invisibleis falseplugin will try to figure out should images be loaded. However since you do not have width and height set all images will be size of 0x0 or 1x1. Because of this all images are in viewport (because of their size) when plugin kicks in. Because images are in viewport Lazy Load will instruct to load them all.
如果您设置skip_invisible为false插件，将尝试确定是否应加载图像。但是，由于您没有设置宽度和高度，因此所有图像的大小均为 0x0 或 1x1。因此，当插件启动时，所有图像都在视口中（因为它们的大小）。因为图像在视口中，延迟加载将指示加载它们。
In short: Add width and height to images. Lazy Load wont work properly without them.
简而言之：为图像添加宽度和高度。没有它们，延迟加载将无法正常工作。
回答by Al Sweigart
I'm not sure when this got added, but you can manually fire the 'appear' event to some or all (depending on the css selector) appear:
我不确定这是什么时候添加的，但是您可以手动将 'appear' 事件触发到某些或全部（取决于 css 选择器）出现：
$("img.lazy").trigger('appear');
Got this from here: http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
从这里得到这个：http: //yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
回答by Sk?ggiga Mannen
I had the same issue. They are in a scrolling div, but would only load after an initial scroll.
我遇到过同样的问题。它们位于滚动 div 中，但只会在初始滚动后加载。
Using 'appear' will show them all, unless you limit it. In my case, I only wanted to show the first 3 on load. The rest of them lazy load as usual.
使用“出现”将显示所有内容，除非您对其进行限制。就我而言，我只想在加载时显示前 3 个。其余的像往常一样懒加载。
$("img.lazy:lt(3)").trigger('appear');
回答by AlexxKur
This is working solution, but in is not very good for some reason:
这是可行的解决方案，但由于某种原因，它不是很好：
$("img").lazyload({
/* Image loaded callback function */
load: function() {
$(window).trigger('scroll');
}
});
Every time lazyload plugin load the picture, this function will be called and window trigger 'scroll' will be emulated, so it is a solution for me
每次lazyload插件加载图片时，都会调用这个函数并模拟窗口触发器'scroll'，所以这对我来说是一个解决方案
回答by user3424426
Increase the failure_limit.
增加failure_limit。
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
滚动页面插件后，虽然卸载的图像循环。循环检查图像是否可见。默认情况下，当找到视口外的第一张图像时，循环停止。这是基于以下假设。页面上的图像顺序与 HTML 代码中的图像顺序相同。对于某些布局假设，这可能是错误的。
Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold.
将 failure_limit 设置为 10 会导致插件在找到 10 个低于折叠的图像后停止搜索要加载的图像。
回答by Alessandro Romeo
I had the same problem with hidden elements, is a simple workaround but it works. When I click on the page, I triggering scroll event to force lazyload script. You can do the same thing with the event resize
我对隐藏元素有同样的问题，这是一个简单的解决方法，但它有效。当我点击页面时，我触发滚动事件以强制延迟加载脚本。你可以用事件调整大小做同样的事情
$(document).ready(function () {
$("img").lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
});
$(window).resize(function () {
$(this).trigger("scroll");
});
});
回答by Deot
In short: Add width and height to images. Lazy Load wont work properly without them.
简而言之：为图像添加宽度和高度。没有它们，延迟加载将无法正常工作。
You should be loaded in advance placeholder;Like this：
你应该提前加载占位符；像这样：
<img src="./images/grey.gif" alt="" style="display:none">
And then
进而
$("img.lazy").lazyload({placeholder : "images/grey.gif"});
If you set the width of the image to 100%,this will provide a width and height. This solved my problem.
如果您将图像的宽度设置为 100%，这将提供宽度和高度。这解决了我的问题。
回答by Gabriele Pala
I had the same problem, and found a solution for this. Please note that my images were placed inside of a div that is populated via an ajax call.
我遇到了同样的问题，并为此找到了解决方案。请注意，我的图像放置在通过 ajax 调用填充的 div 内。
Just change a line of code inside the lazyload sources (lines 147-150) of version 1.8.4:
只需更改 1.8.4 版本的延迟加载源（第 147-150 行）中的一行代码：
/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});
instead of
代替
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
Or eventually add the call to "update()" to any other needed event.
或者最终将对“update()”的调用添加到任何其他需要的事件中。
