Chrome 中延迟加载动态加载内容中的图像时为"待处理"

Question

我有一个页面，其中包含多个独立部分，每个部分都包含可能数百张图像。要使页面加载表演者，我正在做两件事：

• 与JQuery Promises并行加载部分
• 将这些部分渲染后，用jQuery懒负载插件加载图像

这是我在CoffeeScript中如何做到这一点的伪代码：

    $.when.apply($, sectionPromises).then( () ->
      render each section
      $("img.lazyload").lazyload() 
      return
    )

最终发生的事情是第一个选项卡式部分负载的前几张图像，但是所有后续图像（无论是在第一部分中还是完全降低），或者完全是在其他选项卡中的部分中 - 只是"（待处理）"在chrome中。

这在网站的其他部分不会发生，在该网站的其他部分中，我使用插件将懒惰的负载图像在常规构造（全部一次）的页面中。但是这是有趣的事情。问题有时如果我在向下滚动或跨选项卡移动时打开Chrome Developer工具，则不会发生。一切都完美地加载。那有多狂野？

关于如何在动态生成的内容中获取这些懒惰的图像以正确加载Chrome的任何想法 - 没有Chrome Developer工具打开 - 非常感谢。

Answer 1

不幸的是，我能找到的最好的东西是导航到chrome://net-internals/#sockets并按下页面顶部的"齐平插座池"按钮。一旦我用所有图像刷新页面，它们都会尽可能懒惰地加载。

显然期望客户调整浏览器，更不用说知道如何选择了，而是暂时有效的。

Answer 2

我以为我有一个类似的问题，但对我来说，这些元素的表顺序与DOM建议的顺序不可见（DOM中不在DOM中），因此Lazyload插件检查一些元素，看到它们不在视口上并停止执行。

您可以尝试将failure_limit选项增加到高点，请参阅"当图像不顺序"下的jQuery.lazyload文档：

默认情况下，当发现视口外的第一个图像时，停止了循环。这是基于以下假设。页面上的图像顺序与HTML代码中的图像顺序相同。有了一些布局假设，这可能是错误的。您可以使用失败_limit设置来控制加载行为。

$("img.lazy").lazyload({
    failure_limit : 10
});