Paveikslėlių asinchroninis įkėlimas JavaScript

Paveikslėliai, kurie dinamiškai sukuriami per JavaScript, taip pat įkeliami asinchroniškai. Panagrinėkime pavyzdinį kodą:

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

Kaip matote, čia mes sukuriame img žymą, įrašome į jos src paveikslėlio kelią ir patalpiname šį paveikslėlį į body. Paveikslėlis, tačiau, pasirodys puslapyje ne iš karto. Reikalas tas, kad kai mes įrašome į src paveikslėlio kelią - naršyklė pradeda atsisiųsti šį paveikslėlį iš svetainės. Tik tada, kai paveikslėlis bus atsisiųstas, tik tada naršyklė galės jį parodyti.

Jei paveikslėlis yra pakankamai didelis, o interneto sparta pakankamai maža, tada svetainės naudotojas kurį laiką galės "pasisočiuoti" tuščiu paveikslėliu - kol jis bus įkeltas.

Tiesą sakant, img žymos egzistuoja įvykis load, kuris suveikia paveikslėlio įkėlimo pabaigoje:

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

image.addEventListener('load', function() {
	// suveiks paveikslėlio įkėlimo metu
});

Mes galime tai panaudoti, kad patalpintume paveikslėlį puslapyje tik tada, kai šis paveikslėlis bus įkeltas:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // patalpiname įkėlimo metu
});

Paveikslėlis nebūtinai bus įkeltas: gali būti taip, kad paveikslėlio kelias yra neteisingas, arba įvyks interneto nutrūkimas, serverio su svetaine gedimas ar kažkas panašaus. Kalbant kitais žodžiais - išimtinė situacija. Šiuo atveju suveiks ne įvykis load, o įvykis error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// paveikslėlio įkėlimo klaida
});

Sukurkite mygtuką, kurį paspaudus būtų įkeliamas paveikslėlis. Parodykite paveikslėlį, kai jis bus įkeltas. Išveskite pranešimą, jei kils problemų įkeliant paveikslėlį.