Question

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

当我滚动页面时，所有工作都正确

更新

CoffeScript

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

但$(window).resize()只有在我加载页面

时从浏览器控制台输入时才有帮助

Answer 1

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

并添加：

$(window).load(function(){
     $("html,body").trigger("scroll");
});

Answer 2

试试这个......

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});

Answer 3

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

Answer 4

我为时已晚，但如果您仍然遇到此问题，请在所需事件上使用纯javascript setTimeout（）和window.scrollBy（）组合。我在onClick上解决了它，因为我必须在标签窗格下显示图像，其中只有第一个加载的标签在页面加载时显示图像，但是其他标签在点击时没有显示，直到用户滚动一点。我的代码如下：

＆＃13;

function myFunction() {
  setTimeout(function() {
    window.scrollBy(0, 100)
  }, 1000);;
}

＆＃13;

<style>
  div {
    background-color: #FF9900;
    height: 999px;
    width: 100%;
  }
</style>

<a href="#" onClick="myFunction()">Click me to scroll after 1000 milliseconds</a>
<div></div>

＆＃13;

＆＃13; 此示例在单击url后向下滚动页面100px 1000毫秒。最好在400ms后使用1px滚动，以使其不被注意/无缝。希望这可以帮助。

Answer 5

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

Answer 6

这就是我解决这个问题的原因：

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

它非常简单，只是在body和html标签的scroll事件上创建一个window.resize。 BAM。

Answer 7

每当我按某些事情过滤时，我都会通过$.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");

Answer 8

初始化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');

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

Answer 9

$(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

Answer 10

在此SO question中找到，将skip_invisible设置为false可以解决我的问题

Answer 11

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

有关此选项的更多详细信息，请here

jQuery LazyLoad在滚动之前不加载图像

11 个答案: