SVGImageElement: decode() 方法

decode() 方法是 SVGImageElement 接口的一个方法，它会启动图像的异步解码，并返回一个 Promise，该 Promise 在图像解码完成并可以安全地将其追加到 DOM 后解析。

语法

js
decode()

参数

无。

返回值

一个 Promise，当图像数据准备好使用时，例如将其追加到 DOM、替换现有图像等，它将使用 undefined 解析。

异常

无。

示例

在下面的示例中，您可能会看到页面上显示一个空图像，因为图像正在下载

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

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。

另请参阅