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

Question

我正在尝试使用 lazyload 仅加载可见的图像(因为我的网站是响应式的，并且某些内容通过 display:none 隐藏在较小屏幕上的客户端)。

基本上，lazyload 可以工作，但只有在我稍微滚动页面之后。

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

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

Answer 1

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

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

但是如果你想在 ready 上加载所有图像，为什么还需要延迟加载呢？您可以只使用 $.animate。