如何检测在Internet Explorer中渲染图像何时完成

Question

我正试图准备使用解码功能在DOM中装载的大图像，但Internet Explorer没有解码功能。我如何检测Internet Explorer何时解码图像并准备在DOM中挂载？

if (bgimageEl.decode) {
var promise = bgimageEl.decode();
if (promise) {
promise.then(function() {
showElements();
});
} else {
showElements();
}
}else {
}

Answer 1

IE不支持decode()。我认为我们只能使用类似的函数HTMLImageElement.complete来检测图像是否已完全加载。如果是，则我们显示图像(首先隐藏图像(。

样本代码：

var img = document.querySelector('img')
function loaded() {
img.style.display = 'block';
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}

<img src="https://i.imgur.com/3q3kNGh.png" style="display:none;" />