Асінхроннасць загрузкі выяў у 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() {
	// памылка загрузкі выявы
});

Зрабіце кнопку, па націску на якую будзе загружацца выява. Пакажыце выяву, калі яна будзе загружана. Выведзіце паведамленне ў выпадку праблем з загрузкай выявы.