"Pending" in Chrome 当在动态加载的内容中延迟加载图像时
"Pending" in Chrome When Lazy Loading Images in Dynamically Loaded Content
我有一个页面，其中多个独立部分显示在选项卡中，每个部分可能包含数百张图像。为了提高页面加载性能，我做了两件事：
- 与 JQuery promises
并行加载部分
- 渲染这些部分后，使用 JQuery lazy load plugin 延迟加载图像
以下是我在 Coffeescript 中如何执行此操作的伪代码：
$.when.apply($, sectionPromises).then( () ->
render each section
$("img.lazyload").lazyload()
return
)
最终发生的是第一个选项卡部分顶部的前几张图片加载正常，但所有后续图像——无论是在第一部分的下方还是在其他选项卡部分完全——只是“(待定）”在 Chrome.
在网站的其他部分，我使用插件在常规构建的页面中延迟加载图像（一次全部），这不会发生。但有趣的是。如果我在向下滚动或跨选项卡移动时打开 Chrome 开发人员工具，则 有时 问题不会发生。一切都完美加载。这有多疯狂？
关于如何在动态生成的内容中让这些延迟加载的图像在 Chrome 中正确加载的任何想法——无需打开 Chrome 开发者工具——非常感谢。
我以为我遇到了类似的问题，但对我来说，元素的可见顺序与 DOM 所建议的顺序不同（在 DOM 中没有按顺序显示），所以Lazyload 插件检查一些元素，发现它们不在视口中并停止执行。
您可以尝试将 failure_limit 选项增加到更高的值，请参阅 "When Images Are Not Sequential" 下的 jQuery.lazyload Docs:
By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit setting.
$("img.lazy").lazyload({
failure_limit : 10
});
不幸的是，我能找到的最好的方法是导航到 chrome://net-internals/#sockets 并点击页面顶部的 "Flush socket pools" 按钮。一旦我刷新包含所有图像的页面，它们都会按应有的方式延迟加载。
显然期望客户调整他们的浏览器，更不用说知道如何调整，这不是一种选择，但目前这是可行的。
我有一个页面，其中多个独立部分显示在选项卡中，每个部分可能包含数百张图像。为了提高页面加载性能，我做了两件事：
- 与 JQuery promises 并行加载部分
- 渲染这些部分后，使用 JQuery lazy load plugin 延迟加载图像
以下是我在 Coffeescript 中如何执行此操作的伪代码：
$.when.apply($, sectionPromises).then( () ->
render each section
$("img.lazyload").lazyload()
return
)
最终发生的是第一个选项卡部分顶部的前几张图片加载正常，但所有后续图像——无论是在第一部分的下方还是在其他选项卡部分完全——只是“(待定）”在 Chrome.
在网站的其他部分，我使用插件在常规构建的页面中延迟加载图像（一次全部），这不会发生。但有趣的是。如果我在向下滚动或跨选项卡移动时打开 Chrome 开发人员工具，则 有时 问题不会发生。一切都完美加载。这有多疯狂？
关于如何在动态生成的内容中让这些延迟加载的图像在 Chrome 中正确加载的任何想法——无需打开 Chrome 开发者工具——非常感谢。
我以为我遇到了类似的问题，但对我来说，元素的可见顺序与 DOM 所建议的顺序不同（在 DOM 中没有按顺序显示），所以Lazyload 插件检查一些元素，发现它们不在视口中并停止执行。
您可以尝试将 failure_limit 选项增加到更高的值，请参阅 "When Images Are Not Sequential" 下的 jQuery.lazyload Docs:
By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit setting.
$("img.lazy").lazyload({
failure_limit : 10
});
不幸的是，我能找到的最好的方法是导航到 chrome://net-internals/#sockets 并点击页面顶部的 "Flush socket pools" 按钮。一旦我刷新包含所有图像的页面，它们都会按应有的方式延迟加载。
显然期望客户调整他们的浏览器，更不用说知道如何调整，这不是一种选择，但目前这是可行的。