Question

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

以下是我在Coffeescript中如何做的伪代码：

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

最终发生的事情是第一个标签部分顶部的前几个图像加载正常，但所有后续图像 - 无论是在第一部分还是在其他标签部分中完全降低 - 都只是“（待定） “在Chrome中。

在网站的其他部分中我不会发生这种情况，我使用插件在常规构建的页面中延迟加载图像（一次性全部）。但这是有趣的事情。如果我在向下滚动或移动选项卡时打开Chrome开发者工具，则不会发生有时的问题。一切都很完美。这有多疯狂？

有关如何在Chrome中正确加载动态生成内容中的这些延迟加载图片的任何想法 - 无需打开Chrome开发者工具 - 非常感谢。

Answer 1

我认为我遇到了类似的问题，但对我而言，元素的显示顺序与DOM建议的顺序不同（在DOM中不是顺序的），所以Lazyload插件会检查一些元素，看看它们是不在视口中并停止执行。

您可以尝试将failure_limit选项增加到高位，请参阅jQuery.lazyload Docs下的＆＃34;当图像不连续时＃34;

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

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

Answer 2

不幸的是，我能找到的最好的事情是导航到chrome://net-internals/#sockets并点击页面顶部的“Flush socket pools”按钮。一旦我用所有图像刷新页面，他们都会懒得加载。

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