javascript - jquery.Lazy 不加载滚动上的所有图像

Question

我正在对许多 (> 200) 个图像组使用 Lazy。图像的 html 代码是在调用许多异步函数后构建的(当一切准备就绪时， promise 将被激活)。

Lazy 似乎可以工作，滚动时加载第一张图片，但有时只加载一定数量的图片，后面的图片保持不加载。

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

它发生在 chromium 和 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
• 然后单击顶行中的位置图标( map 打开)
• 然后点击 243 标记

会显示一个包含许多图像的弹出窗口，滚动您会看到未加载的缩略图，然后按两次 F12 即可加载它们。

Answer 1

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

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

问题是:默认情况下，Lazy 监听 window 的滚动事件，但在您的情况下，window 上没有任何滚动，因为您在全屏 map 上。所以你必须告诉 Lazy 应该在哪个元素上监听滚动事件。