SVGImageElement: decode() 方法
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 |
瀏覽器相容性
載入中…
另見
HTMLImageElement.decode():相同的功能,但用於 HTML<img>元素。- What does the image decoding attribute actually do? (tunetheweb.com, 2023)