Асинхронность загрузки картинок в 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() {
	// ошибка загрузки картинки
});

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