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 了！