HTMLIFrameElement：loading 属性

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

HTMLIFrameElement 接口的 loading 属性为用户代理提供一个提示字符串，表示是否应在页面加载时立即加载 iframe，或者仅在需要时才加载。

这可用于优化文档内容的加载。在页面加载时可见的 iframe 可以立即（即时）下载，而可能在初始页面加载时位于屏幕外的 iframe 可以懒加载——它们仅在将要出现在窗口的可视视口中时下载。

值

一个字符串，用于提示用户代理如何最好地安排 iframe 的加载时间。可能的值有：

eager: 处理元素后立即加载 iframe。这是默认设置。
lazy: 当浏览器认为在不久的将来可能需要时，加载 iframe。

使用说明

必须启用 JavaScript

只有启用 JavaScript 时才会延迟加载，与属性的值无关。

这是一种反跟踪措施，因为如果用户代理在禁用脚本的情况下支持懒加载，网站仍能通过在页面标记中策略性地放置 iframe 来跟踪用户会话中的大致滚动位置：服务器能够根据请求 iframe 的数量和时间来判断用户的浏览进度。

加载事件的时间

当文档已被完全处理时，将触发 load 事件。

即使 iframe 位于可视视口并在页面加载时被请求，懒加载的 iframe 也不会影响 load 事件的时机。只有当文档中所有立即加载的 iframe 都被请求后，才能触发 load 事件。

示例

以下示例展示了如何定义一个懒加载的 iframe，然后将其附加到文档中的 <div>。只有当 iframe 即将变得可见时，才会加载 iframe。

// 在 iframe 中定义懒加载
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
iframe.width = 320;
iframe.height = 240;
iframe.loading = "lazy";

// 添加到类名为 frameDiv 的 div 元素中
const frameDiv = document.querySelector("div.frameDiv");
frameDiv.appendChild(iframe);

规范

Specification
HTML Standard # dom-iframe-loading

浏览器兼容性

BCD tables only load in the browser

参见

<iframe> 元素
MDN 学习区的 Web 性能
MDN 网络性能指南中的懒加载
web.dev 上的是时候懒加载屏幕外的 iframe 了！