javascript - 在动态加载的内容中延迟加载图像时，Chrome 中的“待处理”

Question

我有一个页面，其中显示在选项卡中的多个独立部分，每个部分可能包含数百张图像。为了使页面加载更高效，我正在做两件事：

这是我如何在 Coffeescript 中执行此操作的伪代码：

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

最终发生的是第一个选项卡部分顶部的前几张图像加载正常，但所有后续图像 - 无论是在第一部分的下方还是完全在其他选项卡部分中 - 在 Chrome 中只是“（待定）” .

这不会发生在网站的其他部分，我使用插件延迟加载以传统方式构建的页面中的图像（一次全部）。但有趣的是。如果我在向下滚动或跨选项卡移动时打开了 Chrome 开发人员工具，则有时不会发生此问题。一切都完美加载。这有多狂野？

任何关于如何在动态生成的内容中获取这些延迟加载的图像以在 Chrome 中正确加载的想法——无需打开 Chrome 开发者工具——都非常感谢。

score 0 · Accepted Answer

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

您可以尝试将failure_limit选项增加到更高的值，请参阅“当图像不连续”下的jQuery.lazyload 文档：

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

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

score 0 · Accepted Answer

不幸的是，我能找到的最好的方法是导航到chrome://net-internals/#sockets并点击页面顶部的“冲洗套接字池”按钮。一旦我用所有图像刷新页面，它们都会按应有的延迟加载。

显然，期望客户调整他们的浏览器，更不用说知道如何调整，这不是一种选择，但目前这是可行的。

2 回答 2