HTMLIFrameElement: loading 属性

值

一个字符串，向用户代理提供一个提示，说明如何最好地调度 iframe 的加载。可能的值为：

eager

在元素被处理后立即加载 iframe。这是默认值。

lazy

当浏览器认为近期可能需要时加载 iframe。

用法说明

必须启用 JavaScript

加载仅在启用 JavaScript 时才会被延迟，而不管此属性的值如何。

这是一种反跟踪措施，因为如果用户代理在禁用脚本的情况下支持延迟加载，用户仍然可以通过在页面标记中策略性地放置 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);

规范

浏览器兼容性

另见

• <iframe> 元素
• 学习：Web 性能
• MDN Web 性能指南中的延迟加载
• web.dev 上的现在是时候延迟加载视口外的 iframe 了！