延迟加载不会加载可见图像

Question

我正在尝试使用lazyload来仅加载可见的图像(因为我的网站是响应式的,并且一些内容被隐藏了display:none给较小屏幕上的客户端).

基本上,lazyload工作,但只有在我滚动页面之后.

这是我正在使用的延迟加载设置,即使将阈值设置为2000px(超过整个页面高度),它仍然只在用户滚动页面后加载图像(甚至1 px).此错误仅出现在webkit浏览器中.

$(document).ready(function () {
    $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});

Answer 1

我认为这可能是threshold参数的一些不当行为,但您仍然可以根据此页面手动触发加载:

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

但如果你想加载所有图像ready,为什么需要lazyload呢？你可以使用$.animate.

Answer 2

只需在 .lazyload() 之后添加它，它将触发滚动并显示图像

$(window).trigger('scroll');