jQuery lazyload 不适用于窗口滚动，但适用于窗口调整大小答案

【问题标题】：jQuery lazyload not working on window scroll but on window resizejQuery lazyload 不适用于窗口滚动，但适用于窗口调整大小
【发布时间】：2017-08-08 20:23:21
【问题描述】：

我在我的一个页面上使用 jquery lazyload。

以下是问题场景：

1) 窗口加载时工作视口中显示的所有图像，完美加载图像。

2) 一旦用户滚动带有惰性类的新图像进入视口，但不会按照其默认行为加载。

3) 如果您在视口中使用图像 A、B、C 和不在视口中的图像 D、E、F 运行延迟加载命令：

$("img.lazy").lazyload();

A,B,C 加载但 D,E,F 不加载。

4) 现在将 D、E、F 带入视口，不加载图像。但是，如果您调整浏览器窗口的大小，它会在视口中加载当前图像。

因此，lazyload 模块正在工作，但它无法在滚动的视口中检测到未加载的图像，这是所需的行为。我认为这与我页面的 dom 结构有关。

有人可以根据上述用例提出建议吗，因为你们中的一些人可能遇到过类似的问题。

【问题讨论】：

你能在 jsfiddle 上复制同样的内容吗，jsfiddle.net
只是切换到lazysizes。它是防弹的：github.com/aFarkas/lazysizes

标签： jquery lazy-loading jquery-lazyload

【解决方案1】：

这可能有多个问题。我建议你使用lazySizes，它使用现代技术使延迟加载配置免费（当然你可以配置很多东西），但它开箱即用。

只需 a) 包含lazysizes 脚本，b) 将src 切换为data-src，c) 将lazyload 类添加到您的图像元素中。

不需要额外的JS。

【讨论】：

【解决方案2】：

我也有同样的问题。直到我调整窗口大小（或打开控制台！？）图片才显示。

<script type="text/javascript">
jQuery(document).ready(function ($) { 
    $("img.lazy").lazyload({
        failure_limit : 1000, 
        event: "lazyload", 
        threshold : 200, 
        effect: "fadeIn", 
        skip_invisible: false
    })
});</script>

【讨论】：