jQuery LazyLoad 在滚动之前不加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13971151/
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
jQuery LazyLoad do not load images until scroll
提问by Alexey
jQuery LazyLoad doesn't load images in open page's visible part until I scroll page even on 1px.
jQuery LazyLoad 不会在打开页面的可见部分加载图像，直到我滚动页面甚至在 1px 上。
When I scroll page all works right
当我滚动页面时一切正常
Update:
更新：
CoffeScript
咖啡脚本
jQuery ->
$("img.lazy").show().lazyload()
$(window).resize()
But $(window).resize()helps only if i enter it from browser's console when page have loaded
但$(window).resize()只有当我在页面加载时从浏览器的控制台输入它时才有帮助
采纳答案by Mika Tuupola
Your images must have width and height set.
您的图像必须设置宽度和高度。
回答by Mario Gonzales Flores
$("img.lazy").lazyload({
threshold : 50
});
And add this:
并添加这个：
$(window).load(function(){
$("html,body").trigger("scroll");
});
回答by Kashif Tufail
I am too late but if you are still facing this issue, use pure javascript setTimeout() and window.scrollBy() combination on your required event. I solved it onClick as I had to show images under tabbed panes where only the first loaded tab showed images when the page loaded but rest of the tabs didn't show when clicked until the user scrolls a bit. my code is below:
我为时已晚，但如果您仍然面临此问题，请在所需事件上使用纯 javascript setTimeout() 和 window.scrollBy() 组合。我在 onClick 上解决了这个问题，因为我必须在选项卡式窗格下显示图像，其中只有第一个加载的选项卡在页面加载时显示图像，但其他选项卡在用户滚动一点之前没有显示。我的代码如下：
function myFunction() {
setTimeout(function() {
window.scrollBy(0, 100)
}, 1000);;
}<style>
div {
background-color: #FF9900;
height: 999px;
width: 100%;
}
</style>
<a href="#" onClick="myFunction()">Click me to scroll after 1000 milliseconds</a>
<div></div>回答by Reinstate Monica Cellio
Try this....
尝试这个....
$(function() {
$("img.lazy").show().lazyload()
window.onload = function() {
$(window).resize()
};
});
回答by dansch
This is what solved this problem for me:
这就是为我解决这个问题的原因：
$("html,body").on('scroll', function(){
$(window).resize()
});
Its really simple, it just makes an window.resize on the scroll event from body and html tags. bam.
它真的很简单，它只是在来自 body 和 html 标签的滚动事件上创建一个 window.resize 。巴姆。
回答by Mark
The current version of Lazyload triggers the initial update upon the window load event. So if you load images dynamically later - you need an additional event such as a scroll to trigger an update cycle. This was my issue with images showing up only after scroll.
当前版本的 Lazyload 在窗口加载事件时触发初始更新。因此，如果您稍后动态加载图像 - 您需要一个额外的事件，例如滚动来触发更新周期。这是我的图像仅在滚动后显示的问题。
回答by ppseprus
I get my images through a $.post()query whenever I filter by certain things, therefore I need the whole thing to run at every reload
$.post()每当我按某些内容过滤时，我都会通过查询获取我的图像，因此我需要在每次重新加载时运行整个过程
$.post( "queries.php", { var1:var1, var2:var2, .. }, function(response){
for( var i=0; i<response.length; i++ ) { $("#container").append(response[i]); }
$("img.lazy").lazyload();
$(window).resize();
}, "json");
回答by Towers
When you initialize lazyload you can tell it which event(s) to trigger on (by default it is set to 'scroll'). I suggest adding a custom event to that list and triggering it whenever it makes sense for you:
当您初始化lazyload 时，您可以告诉它要触发哪个事件（默认情况下它设置为'scroll'）。我建议在该列表中添加一个自定义事件，并在对您有意义的时候触发它：
$('.lazy').lazyload({
event: 'scroll whenever-i-want'
});
// whenever you want to trigger your event (after ajax load, on dom ready, etc...)
$(document).trigger('whenever-i-want');
This leaves the default scroll functionality in but also allows you to trigger the lazy loading on demand.
这保留了默认的滚动功能，但也允许您按需触发延迟加载。
回答by RGS
$(document).ready(function () {
$("img.lazy").lazyload({
<br/>placeholder: rooturl + "Themes/images/imgloading.gif",<br/>
effect: "fadeIn",<br/>
skip_invisible: false<br/>
});<br/>
});<br/>
$(document).ready(function() {<br/>
$(window).load(function() {<br/>
update();<br/>
}); <br/>
});<br/>
Use this lazy load script https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130
使用这个延迟加载脚本https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130
回答by Pierre
As found in this SO question, setting skip_invisible to false solved the problem for me
正如在this SO question中发现的那样，将skip_invisible设置为false为我解决了这个问题
