Attēlu ielādes asinhronitāte JavaScript

Attēli, kas dinamiski izveidoti izmantojot JavaScript, tiek ielādēti asinhroni. Apskatīsim, piemēram, šādu kodu:

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

Kā redzat, šeit mēs izveidojam img elementu, iestatām tā src atribūtā ceļu uz attēlu un ievietojam šo attēlu body. Tomēr attēls parādīsies lapā ne uzreiz. Lieta tāda, ka tad, kad mēs iestatām src ceļu uz attēlu - pārlūkprogramma sāk lejupielādēt šo attēlu no vietnes. Tiklīdz attēls tiks lejupielādēts, tikai tad pārlūkprogramma varēs to parādīt.

Ja attēls ir pietiekami liels, un interneta ātrums ir pietiekami lēns, tad vietnes lietotājs kādu laiku varēs "baudīt" tukšu attēlu - līdz tas ielādēsies.

Patiesībā img elementam pastāv notikums load, kas tiek izsaukts pēc attēla ielādes pabeigšanas:

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

image.addEventListener('load', function() {
	// izpildīsies, kad attēls ielādējies
});

Mēs to varam izmantot, lai ievietotu attēlu lapā tikai tad, kad šis attēls būs ielādējies:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // ievietojam pēc ielādes
});

Attēls ne vienmēr ielādēsies: var būt tā, ka ceļš uz attēlu ir nepareizs, vai arī notiek interneta pārtraukums, servera bojājums vai kaut kas līdzīgs. Citiem vārdiem sakot - izņēmuma situācija. Šajā gadījumā tiks izsaukts nevis notikums load, bet notikums error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// attēla ielādes kļūda
});

Izveidojiet pogu, kuras nospiešanas rezultātā tiks ielādēts attēls. Parādiet attēlu, kad tas būs ielādējies. Izvadiet ziņojumu problēmu gadījumā ar attēla ielādi.