jquery.Lazy无法在滚动条上加载所有图像

Question

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

懒惰似乎可以正常工作，滚动时会先加载第一张图像，但有时仅加载到一定数量的图像，随后的图像仍不加载。

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

它同时发生在铬和火狐中

显然，加载的图像数与threshold惰性参数的值有关。

我的懒人的调用：

$(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

您应将appendScroll添加到您的惰性调用中，如this example: Elements inside a container中所述。

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

问题是：默认情况下，Lazy侦听window的滚动事件，但是在您的情况下，window上没有任何滚动，因为您在全屏地图上。因此，您必须告诉Lazy应该在哪个元素上侦听滚动事件。