HTMLImageElement.decode()

HTMLImageElement 接口的 decode() 方法返回一个当图片解码后可安全用于附加到 DOM 上时 resolves 的 Promise 对象。 这可用于在将图片附加到一个 DOM 中的元素(或作为一个新元素加入 DOM 中)之前启动加载,所以在将图像添加到 DOM 时可以立即渲染图像。这反过来,防止了将图像加入DOM后图像的加载造成下一帧渲染的延迟。

语法

var promise = HTMLImageElement.decode();

参数

无.

返回

一个一旦数据准备好可供使用时resolve的promise对象.

异常

DOMException 表示解码图像时出错。

使用提示

一个 decode() 的潜在用例:当在加载一个非常大的图片时(例如,一个在线相册),你可以在加载初期提供一个低分辨率的缩略图,之后通过实例化一个 HTMLImageElement 将该图像替换为一个全分辨率图像,设置其 source 为全分辨率图像URL,使用 decode() 获取一旦全分辨率图像准备好被使用时 resolved 的 promise 对象。这时你可以使用当前可用的全分辨率图像替换之前的低分辨率图像。

例子

以下例子展示了如何使用 decode() 方法来控制一个图像插入 DOM 的时机。若不使用 Promise (en-US) 返回方法,你将在图像的 load (en-US) 事件处理函数中将图像加入 DOM 中,通过 error (en-US) 事件处理函数处理错误。

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

Specifications

Specification Status Comment
HTML Living Standard
decode()
Living Standard Initial definition.

浏览器兼容性

BCD tables only load in the browser