Chrome 原生图像延迟加载仅适用于 iframe答案

【问题标题】：Chrome native image lazy loading works inside iframe onlyChrome 原生图像延迟加载仅适用于 iframe
【发布时间】：2020-07-24 19:00:55
【问题描述】：

Chrome 81、FF 75（今天最新）

Chrome 原生图像延迟加载仅在 iframe 内有效。为什么？在 FF 中效果很好

page1.htm（延迟加载在 Chrome 中不起作用，但在 FF 中很好）：

<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<img src="https://wallpaperplay.com/walls/full/5/e/a/218959.jpg" loading="lazy">

page2.htm（通过 iframe 进行延迟加载在 Chrome 和 FF 中都有效）：

<iframe src="page1.htm">

这是 Chrome 的错误吗？在FF中效果很好

（您可以通过滚动和开发者工具 -> 网络检查图像延迟加载）

【问题讨论】：

编辑您的问题。您可以使用 sn-p 工具并添加比代码更好的功能。阅读：stackoverflow.com/help/how-to-ask
我没有使用代码 sn-p，因为它在 iframe 中运行，这可能会误导读者，因为我的问题/问题是 iframe 相关的

标签： html image google-chrome iframe lazy-loading

【解决方案1】：

在我的例子中，我必须显式设置 width 属性，要么是内联的，要么是在 CSS 文件中的。

其实你可以试试original demo。如果您在此演示中删除宽度和高度属性，Chrome 上的延迟加载将不起作用。

【讨论】：

【解决方案2】：

我遇到了同样的问题，但仅在图像距离视口足够时。否则会延迟加载。

请尝试在 Chrome 中打开这个最小的工作示例，然后慢慢向下滚动页面。当视口大约位于页面中间时，将加载图像。

<html>
    <head>
        <style>
            .dummy {
                height: 700vh;
            }
        </style>
    </head>
    <body>
        <div class="dummy"></div>
        <img src="https://yasminfinch.com/wp-content/uploads/2015/03/Hello-icon-300x212.jpg" loading="lazy">
    </body>
</html>

如果没有信心，我可以建议它是一个功能，而不是一个错误。某种优化。例如，当用户足够快地向上/向下滚动时，它会减少看到图像正在加载的机会。

【讨论】：

谢谢！实际上，它适用于在图像之前增加元素高度的情况。 Firefox 的工作方式有点不同（使用 loading="laze"），它会在您滚动到图像时准确地加载图像