时间戳

首页 > 解决方案 > Chrome 原生图像延迟加载仅适用于 iframe

html - Chrome 原生图像延迟加载仅适用于 iframe

问题描述

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中效果很好

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

标签： htmlimagegoogle-chromeiframelazy-loading

解决方案

我有同样的问题，但只有当图像足够靠近视口时。否则它会被延迟加载。

请尝试在 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>

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

推荐阅读