Асинхроно учитавање слика у 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() {
	// грешка при учитавању слике
});

Направите дугме, при клику на које ће се учитати слика. Прикажите слику када се учита. Прикажите поруку у случају проблема са учитавањем слике.