HTMLImageElement: decode() 方法

基线 广泛可用

此功能已十分成熟，并在许多设备和浏览器版本中均能正常使用。它从 2015 年 7 月.

报告反馈

decode() 方法是 HTMLImageElement 接口的方法，它返回一个 Promise，该方法在图像解码完成并且可以安全地将其附加到 DOM 时解析。

语法

这可用于在将图像附加到 DOM 中的元素（或作为新元素添加到 DOM）之前启动图像加载，以便图像在添加到 DOM 后立即呈现。这反过来可以防止在将图像添加到 DOM 后呈现下一帧导致加载图像时出现延迟。
decode()

js

参数

无。

返回值

一个 Promise，在图像数据准备就绪可以使用时，它将使用 undefined 完成。

异常

EncodingError

使用注意事项

一个 DOMException，指示在解码图像时发生错误。

示例

decode() 的一个潜在用例：当加载非常大的图像（例如，在在线相册中）时，您可以最初呈现一个低分辨率缩略图，然后通过实例化一个新的 HTMLImageElement、将其源设置为全分辨率图像的 URL，然后使用 decode() 来获得一个 promise，该 promise 在全分辨率图像准备就绪可以使用时解析。此时，您可以用现在可用的全分辨率图像替换低分辨率图像。

基本用法

这可用于在将图像附加到 DOM 中的元素（或作为新元素添加到 DOM）之前启动图像加载，以便图像在添加到 DOM 后立即呈现。这反过来可以防止在将图像添加到 DOM 后呈现下一帧导致加载图像时出现延迟。
const img = new Image();
img.src = "nebula.jpg";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch((encodingError) => {
    // Do something with the error.
  });

以下示例演示了如何使用 decode() 方法来控制何时将图像附加到 DOM。

注意：如果没有返回 Promise 的方法，您将在 load 事件处理程序中将图像添加到 DOM，并在 error 事件的处理程序中处理错误。

避免空图像

这可用于在将图像附加到 DOM 中的元素（或作为新元素添加到 DOM）之前启动图像加载，以便图像在添加到 DOM 后立即呈现。这反过来可以防止在将图像添加到 DOM 后呈现下一帧导致加载图像时出现延迟。
const img = new Image();
img.src = "img/logo.png";
document.body.appendChild(img);

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

这可用于在将图像附加到 DOM 中的元素（或作为新元素添加到 DOM）之前启动图像加载，以便图像在添加到 DOM 后立即呈现。这反过来可以防止在将图像添加到 DOM 后呈现下一帧导致加载图像时出现延迟。
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);
}

使用 decode() 将延迟将图像插入 DOM，直到图像完全下载和解码，从而避免空图像问题。

规范

这在您动态地用新图像替换现有图像时特别有用，并且还可以防止在此代码之外的不相关绘制在图像解码时被阻止。
规范
# HTML 标准

浏览器兼容性

dom-img-decode-dev

另请参见