jquery.Lazy没有在滚动时加载所有图像

Question

我正在使用Lazy与许多（> 200）图像组。在调用许多异步函数之后构建图像的html代码（当一切准备就绪时激活一个承诺）。

懒惰似乎工作，滚动时加载第一个图像，但有时只加载一定数量的图像，下面的图像保持不加载。

特别是在传单弹出窗口中会发生这种情况：滚动时只加载可见部分下方的第一行图像，而从不加载其他图像。

它发生在chrome和firefox中

显然，加载的图像数量与threshold Lazy参数的值相关联。

我的懒惰的调用：

$(function() {
    $(selector).Lazy(
        {
            autoDestroy: true,
            chainable: false,
            threshold: 20
        }
    );
});

一个图像的代码由Lazy解决但未加载：

<div id="popup-img-_f-diocesi-eventi_giun-ingresso_giun_virgo_potens_2019--ingresso_giun_virgo_potens_2019-02-23-17_00_05_jpg_1556911864" class="thumb-and-caption-container popup-img-00444311103666667-000885614966666667" style="width: 250px; margin-right: 7.5px; margin-bottom: 7.5px;">
  <div class="thumb-container" style="width: 250px; height: 250px;">
    <span class="helper"></span>
    <img title="albums/Diocesi/Eventi Giun/Ingresso Giun Virgo Potens 2019/Ingresso Giun Virgo Potens 2019-02-23--17.00.05.jpg" alt="Ingresso Giun Virgo Potens 2019-02-23--17.00.05" data-src="cache/08/1/diocesi-eventi_giun-ingresso_giun_virgo_potens_2019-ingresso_giun_virgo_potens_2019-02-23-17.00.05.jpg-250ts.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="lazyload-popup-media thumbnail" height="250" width="250" mediahash="#!/_f-diocesi-eventi_giun-ingresso_giun_virgo_potens_2019/ingresso_giun_virgo_potens_2019-02-23-17.00.05.jpg" style="width: 250px; height: 250px;">
  </div>
  <div class="media-caption">Ingresso</div>
</div>

src属性保留默认的Lazy的1px x 1px gif。

控制台中未显示错误。

然后奇怪的是，按两次f12，即打开和关闭显影工具，图像被加载。

我不能做一个jsfiddle，但我可以证明这个问题：

• click here
• 然后点击顶行的位置图标（打开地图）
• 然后单击243标记

显示一个包含许多图像的弹出窗口，滚动您看到未加载的缩略图，并且您将它们加载到F12两次。

Answer 1

您应该在Lazy调用中添加appendScroll，如this example: Elements inside a container中所述。

因此，将appendScroll: $('#popup-images-wrapper')添加到您的配置中 - 或者滚动框的选择器是什么。

事情是：默认情况下，Lazy会监听window的滚动事件，但在你的情况下，没有任何内容在window上滚动，因为你在全屏地图上。所以你必须告诉Lazy哪个元素应该监听滚动事件。