Paveikslėlių asinchroninis įkėlimas JavaScript

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

javascriptlet 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:

javascriptlet 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:

javascriptlet 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:

javascriptlet 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
});