HTMLImageElement: loading 屬性

值

一個字串，用於提示使用者代理如何最好地安排圖片的載入，以最佳化頁面效能。可能的值有：

eager

預設行為，eager 告訴瀏覽器在處理 <img> 元素後立即載入圖片。

lazy

告訴使用者代理在瀏覽器估算圖片即將需要時才開始載入。例如，如果使用者正在滾動文件，lazy 的值將導致圖片僅在即將出現在視窗 可視視口 前不久才被載入。

用法說明

必須啟用 JavaScript

僅當啟用了 JavaScript 時才會延遲載入。這是一種反跟蹤措施，因為如果使用者代理在停用指令碼時支援延遲載入，網站仍然可以透過策略性地在頁面標記中放置圖片來跟蹤使用者在會話中的大致滾動位置，從而允許伺服器跟蹤請求的圖片數量和時間。

load 事件的時機

當文件完全處理完畢時，會觸發 load 事件。當圖片被急切載入（這是預設行為）時，文件中的所有圖片都必須在 load 事件觸發之前獲取。

透過為 loading 指定 lazy 值，您可以防止圖片因請求、獲取和處理圖片所需的時間而延遲 load 屬性。

loading 屬性設定為 lazy 但在初始頁面載入時位於可視視口內的圖片的載入時間，是在佈局已知後立即載入，但它們的載入不會延遲 load 事件的觸發。換句話說，這些圖片不會在處理 <img> 元素時立即載入，但仍作為初始頁面載入的一部分進行載入。它們只是不影響 load 事件的時機。

這意味著當 load 觸發時，位於可視視口內的任何延遲載入的圖片可能尚未可見。

防止圖片延遲載入時元素位移

當一張圖片的載入被 loading 屬性設定為 lazy 延遲後，瀏覽器會根據圖片的樣式和固有尺寸確定 <img> 元素的最終尺寸，然後根據元素尺寸的任何變化重排文件，以更新元素的位置以適應圖片。

為了防止這種重排發生，您應該使用圖片元素的 width 和 height 屬性明確指定圖片顯示的尺寸。透過這種方式建立固有的 縱橫比，可以防止元素在文件載入過程中發生位移，這最多可能令人不安或反感，最壞的情況下可能導致使用者點選錯誤的內容，具體取決於延遲載入和重排的確切時機。

示例

下面顯示的 addImageToList() 函式使用延遲載入來避免在實際需要時才從網路載入圖片，從而將照片縮圖新增到專案列表中。

function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  let newItem = document.createElement("div");
  newItem.className = "photo-item";

  let newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}

規範

瀏覽器相容性

另見

• <img> 元素
• MDN 學習區域中的 Web 效能
• MDN Web 效能指南中的 延遲載入