Как я могу предотвратить просмотр изображения img в браузере?

Question

Когда я добавляю новые изображения в DOM, иногда я вижу изображение, нарисованное сверху вниз.Есть ли простой метод javascript или обработчик событий, который я могу использовать, чтобы полное изображение появилось только после того, как браузер завершил его рисование / рендеринг?

Answer 1

Вы можете использовать JavaScript, чтобы скрыть изображение до полной его загрузки.

HTML:

<img id="image" src="...">

JavaScript:

var image = document.querySelector('#image');

image.style.opacity = '0'; //set opacity to 0 (fully transparent)

image.onload = function(){ //when image is loaded, execute function
    image.style.opacity = '1'; //set opacity to 1 (fully visible)
}

---

Потому что яиспользуйте свойство opacity в этом примере, вы даже можете анимировать появившееся изображение.

CSS:

#image {
    transition: opacity .5s;
}