SVGImageElement: decode() 方法

基準線 2025
新推出

自 ⁨2025 年 3 月⁩ 起,此功能可在最新的裝置和瀏覽器版本上使用。此功能可能在舊裝置或瀏覽器上無法正常工作。

SVGImageElement 介面的 decode() 方法會啟動影像的非同步解碼,並返回一個 Promise,該 Promise 在影像解碼完成且可以安全地將其新增到 DOM 後解析。

語法

js
decode()

引數

無。

返回值

一個 Promise,一旦影像資料準備好使用(例如,透過將其新增到 DOM、替換現有影像等),就會以 undefined 來 fulfilled。

異常

無。

示例

在下面的示例中,當影像正在下載時,你很可能會在頁面上看到一個空白影像。

js
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const img = document.createElementNS(SVG_NS, "image");
img.src = "img/logo.svg";
svg.appendChild(img);

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

js
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

async function getImage() {
  const img = document.createElementNS(SVG_NS, "image");
  img.src = "img/logo.svg";
  await img.decode();
  svg.appendChild(img);
  const text = document.createElementNS(SVG_NS, "text");
  text.textContent = "Image is fully loaded!";
  svg.appendChild(text);
}

如果你正在動態地將一個現有影像替換為一個新影像,這一點尤其有用,並且還可以防止在影像解碼期間,與此程式碼無關的繪製操作被延遲。

規範

規範
HTML
# dom-img-decode-dev

瀏覽器相容性

另見