как определить, когда рендеринг изображения завершен в Inte rnet Explorer? - PullRequest
0 голосов
/ 14 июля 2020

Я пытаюсь подготовить большой образ для монтирования в DOM с помощью функции декодирования, но Inte rnet Explorer не поддерживает декодирование. Как я могу определить, когда Inte rnet Explorer декодировал изображение и быть готовым к монтированию в DOM?

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

}

1 Ответ

0 голосов
/ 15 июля 2020

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;" />
...