# Асинхронность загрузки картинок в JavaScript

Картинки, которые динамически создаются через JavaScript, также загружаются асинхронно. Рассмотрим для примера следующий код:

`let image = document.createElement('img'); image.src = 'img.png'; document.body.appendChild(image);`

Как вы видите, здесь мы создаем тег `img`, записываем в его `src` путь к картинке и размещаем эту картинку в `body`. Картинка, однако, появится на странице не сразу. Дело в том, что когда мы записали в `src` путь к картинке - браузер начинает скачивать эту картинку с сайта. Как только картинка будет скачана, только тогда браузер сможет ее показать.

Если картинка достаточно большая, а скорость интернета достаточно маленькая, то пользователь сайта некоторое время сможет "полюбоваться" на пустую картинку - пока она не подгрузится.

На самом деле у тега `img` существует событие `load`, которое срабатывает при окончании загрузки картинки:

`let image = document.createElement('img'); image.src = 'img.png'; image.addEventListener('load', function() { // сработает по загрузке картинки });`

Мы можем использовать это, чтобы разместить картинку на странице, только когда эта картинка будет загружена:

`let image = document.createElement('img'); image.src = 'img.png'; image.addEventListener('load', function() { document.body.appendChild(image); // размещаем по загрузке });`

Картинка не обязательно загрузится: может быть такое, что путь к картинке неверный, либо произойдет обрыв интернета, поломка сервера с сайтом или что-то подобное. Говоря другими словами - исключительная ситуация. В этом случае сработает не событие `load`, а событие `error`:

`let image = document.createElement('img'); image.src = 'img.png'; image.addEventListener('load', function() { document.body.appendChild(image); }); image.addEventListener('error', function() { // ошибка загрузки картинки });`

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

← →
↑
en ru