javascript - 如何检测在 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;" />