Chrome 本机图像延迟加载仅在 iframe 内有效

Question

Chrome 81，FF 75（今天最新）

in 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的bug吗？在 FF 中效果很好

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

Answer 1

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

请尝试打开 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>

没有信心，我可以认为这是一个功能，而不是错误。某种优化。它减少了看到图像正在加载的机会，例如，当用户滚动 up/down 足够快时。

Answer 2

在我的例子中，我必须显式地设置 width 属性，无论是内联还是在 CSS 文件中。

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

Chrome 本机图像延迟加载仅在 iframe 内有效

Chrome native image lazy loading works inside iframe only

html

iframe

google-chrome

lazy-loading

image