HTMLIFrameElement：loading 属性

基线 2023

新可用

自 2023 年 12 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法使用。

loading 是 HTMLIFrameElement 接口的一个字符串属性，它为用户代理提供了一个提示，指示 iframe 应该在页面加载时立即加载，还是仅在需要时加载。

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

值

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

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

使用说明

必须启用 JavaScript

无论此属性的值如何，只有在启用 JavaScript 时才会延迟加载。

这是一项反跟踪措施，因为如果用户代理在禁用脚本时支持延迟加载，则网站仍然可以通过在页面标记中战略性地放置 iframe 来跟踪用户在整个会话中的大致滚动位置，以便服务器可以跟踪请求了多少 iframe 以及何时请求。

load 事件的时机

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

即使 iframe 位于视觉视口中并且因此在页面加载时被获取，延迟加载的 iframe 也不会影响 load 事件的时机。文档中所有预加载的 iframe 必须在 load 事件触发之前被获取。

示例

下面的示例显示了如何定义一个延迟加载的 iframe，然后将其附加到文档中的 <div>。然后，只有当 iframe 即将可见时才会加载它。

// Define iframe with lazy loading
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
iframe.width = 320;
iframe.height = 240;
iframe.loading = "lazy";

// Add to div element with class named frameDiv
const frameDiv = document.querySelector("div.frameDiv");
frameDiv.appendChild(iframe);

规范

规范
HTML 标准 # dom-iframe-loading

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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