15

jQuery LazyLoad 不会在打开页面的可见部分加载图像，直到我滚动页面甚至 1px。

当我滚动页面时一切正常

更新：

咖啡脚本

jQuery ->
   $("img.lazy").show().lazyload()
   $(window).resize()

但$(window).resize()只有当我在页面加载后从浏览器的控制台输入它时才有帮助

4

11 回答 11

21 
$("img.lazy").lazyload({
             threshold : 50
         });

并添加：

$(window).load(function(){
     $("html,body").trigger("scroll");
});
于 2013-10-30T16:57:28.953 回答
4

我为时已晚，但如果您仍然面临此问题，请在所需事件上使用纯 JavaScript setTimeout() 和 window.scrollBy() 组合。我在单击时解决了它，因为我必须在选项卡式窗格下显示图像，其中只有第一个加载的选项卡在页面加载时显示图像，但其余选项卡在单击时不显示，直到用户滚动一点。我的代码如下：

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>
此示例在单击 url 1000 毫秒后将页面向下滚动 100px。最好在 400 毫秒后使用 1px 滚动以使其不被注意/无缝。希望这可以帮助。

于 2014-11-18T04:58:34.910 回答
4

您的图像必须设置宽度和高度。

于 2013-01-27T11:36:36.390 回答
3

尝试这个....

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});
于 2012-12-20T12:54:37.890 回答
3

这就是为我解决这个问题的方法：

$("html,body").on('scroll', function(){ 
    $(window).resize() 
});

它真的很简单，它只是在 body 和 html 标签的滚动事件上创建一个 window.resize 。班。

于 2015-01-14T06:32:10.317 回答
2

当前版本的 Lazyload 在窗口加载事件时触发初始更新。因此，如果您稍后动态加载图像 - 您需要一个额外的事件（例如滚动）来触发更新周期。这是我在滚动后才显示图像的问题。

于 2013-04-13T13:59:45.967 回答
0

当您初始化延迟加载时，您可以告诉它要触发哪些事件（默认情况下它设置为“滚动”）。我建议在该列表中添加一个自定义事件，并在对您有意义时触发它：

$('.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');

这保留了默认滚动功能，但也允许您按需触发延迟加载。

于 2013-07-17T16:28:19.633 回答
0

每当我过滤某些东西时，我都会通过查询来获取我的图像$.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");
于 2013-05-09T09:42:21.230 回答
0

正如在这个SO question中发现的那样，将 skip_invisible 设置为 false 为我解决了这个问题

于 2013-10-28T10:43:23.367 回答
0 
$(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/>

使用这个延迟加载脚本https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130

于 2013-09-19T10:27:58.680 回答
0

对于具有多个按 z-index 排序的图像的滑块，lazyload 选项failure_limit会派上用场。

有关此选项的更多详细信息，请参见此处

于 2015-05-19T09:30:17.060 回答