HTMLIFrameElement:loading 属性
HTMLIFrameElement
接口的 loading
属性为用户代理提供一个提示字符串,表示是否应在页面加载时立即加载 iframe,或者仅在需要时才加载。
这可用于优化文档内容的加载。在页面加载时可见的 iframe 可以立即(即时)下载,而可能在初始页面加载时位于屏幕外的 iframe 可以懒加载——它们仅在将要出现在窗口的可视视口中时下载。
值
使用说明
必须启用 JavaScript
只有启用 JavaScript 时才会延迟加载,与属性的值无关。
这是一种反跟踪措施,因为如果用户代理在禁用脚本的情况下支持懒加载,网站仍能通过在页面标记中策略性地放置 iframe 来跟踪用户会话中的大致滚动位置:服务器能够根据请求 iframe 的数量和时间来判断用户的浏览进度。
加载事件的时间
当文档已被完全处理时,将触发 load
事件。
即使 iframe 位于可视视口并在页面加载时被请求,懒加载的 iframe 也不会影响 load
事件的时机。只有当文档中所有立即加载的 iframe 都被请求后,才能触发 load
事件。
示例
以下示例展示了如何定义一个懒加载的 iframe,然后将其附加到文档中的 <div>
。只有当 iframe 即将变得可见时,才会加载 iframe。
js
// 在 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 了!