1. Web
  2. Web API
  3. HTMLImageElement
  4. decode()

HTMLImageElement: decode() 方法

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

HTMLImageElement 介面的 decode() 方法返回一個 Promise，該 Promise 在影像解碼完成並且可以安全地將其附加到 DOM 後解析。

這可用於在將影像附加到 DOM 元素（或將其作為新元素新增到 DOM）之前啟動影像載入，以便影像在新增到 DOM 後可以立即渲染。這反過來又可以防止在將影像新增到 DOM 後的下一幀渲染導致影像載入時的延遲。

語法

js
decode()

引數

無。

返回值

一個 Promise，一旦影像資料準備好使用，它將以 undefined fulfilled。

異常

EncodingError

一個 DOMException，指示在解碼影像時發生錯誤。

用法說明

decode() 的一個潛在用例：載入非常大的影像時（例如，在線上相簿中），您可以先顯示一個低解析度的縮圖，然後透過例項化一個新的 HTMLImageElement 來替換該影像，將其源設定為高解析度影像的 URL，然後使用 decode() 獲取一個 Promise，該 Promise 在高解析度影像準備好使用後解析。屆時，您就可以用現在可用的高解析度影像替換低解析度影像。

示例

基本用法

以下示例顯示瞭如何使用 decode() 方法來控制何時將影像附加到 DOM。

js
const img = new Image();
img.src = "nebula.jpg";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch((encodingError) => {
    // Do something with the error.
  });

注意：如果沒有返回 Promise 的方法，您會在 load 事件處理程式中將影像新增到 DOM，並在 error 事件的處理程式中處理錯誤。

避免空白影像

在下面的示例中，在影像下載過程中，您很可能會在頁面上看到一個空白影像。

js
const img = new Image();
img.src = "img/logo.png";
document.body.appendChild(img);

使用 decode() 將會延遲將影像插入 DOM，直到影像完全下載和解碼，從而避免了空白影像問題。

js
async function getImage() {
  const img = new Image();
  img.src = "img/logo.png";
  await img.decode();
  document.body.appendChild(img);
  const p = document.createElement("p");
  p.textContent = "Image is fully loaded!";
  document.body.appendChild(p);
}

如果您動態地用新影像替換現有影像，這一點尤其有用，並且還可以防止此程式碼以外的不相關繪製在影像解碼期間被延遲。

規範

規範
HTML
# dom-img-decode-dev

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者 修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤
© . Content available under a Creative Commons license.