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
事件处理函数中将图像加入 DOM 中,通过 error
事件处理函数处理错误。
const img = new Image();
img.src = 'nebula.jpg';
img.decode()
.then(() => {
document.body.appendChild(img);
})
.catch((encodingError) => {
// Do something with the error.
})
规范
Specification |
---|
HTML Standard # dom-img-decode-dev |
浏览器兼容性
BCD tables only load in the browser