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
然后单击顶行中的位置图标（地图打开）
然后点击 243 标记

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

Answer 1

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

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

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

jquery.Lazy 未加载滚动条上的所有图像

jquery.Lazy not loading all the images on scroll

javascript

jquery

lazy-loading

leaflet