Question

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

以下是问题情景：

1）窗口加载时工作视口中出现的所有图像都可以完美地加载图像。

2）一旦用户使用类lazy滚动新图像，就会进入视口但不按其默认行为加载。

3）如果运行lazyload命令，其中视图中的图像为A，B，C，而D，E，F不在视口中：

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

A，B，C负载，但D，E，F不加载。

4）现在在视口中显示D，E，F，没有加载图像。但是，如果您调整浏览器窗口的大小，它会在视口中加载当前图像。

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

有人可以基于上述用例提出建议吗，因为你们中的一些人可能面临类似的问题。

Answer 1

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

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

不需要额外的JS。

Answer 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>

jQuery lazyload没有在窗口滚动上工作但在窗口调整大小

2 个答案: