3

我在我的一个页面上使用 jquerylazyload。

以下是问题场景：

1）在窗口加载时工作视口中存在的所有图像，完美加载图像。

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

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

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

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

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

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

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

4

2 回答 2

1

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

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

不需要额外的 JS。

于 2015-08-03T16:39:58.213 回答
0

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

<script type="text/javascript">
jQuery(document).ready(function ($) { 
    $("img.lazy").lazyload({
        failure_limit : 1000, 
        event: "lazyload", 
        threshold : 200, 
        effect: "fadeIn", 
        skip_invisible: false
    })
});</script>
于 2015-08-03T15:57:11.703 回答