JavaScript-de suratlary ýüklemekde asinkronlyk

JavaScript arkaly dinamiki döredilen suratlar hem asinkron ýüklenýär. Mysal üçin aşakdaky koda serediň:

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

Görşüňiz ýaly, bu ýerde biz img tegi döredýäris, onuň src atributyna surat ýoluny ýazýarys we bu suraty body-e ýerleşdirýäris. Emma surat sahypada derrew görünmez. Sebäbi, biz src-a surat ýoluny ýazanymyzda - brauzer şu suraty sahypadan ýükleýär. Surat ýüklenen wagty, şol wagt brauzer ony görkezip bilýär.

Eger surat ýeterlik uly bolsa, we internet tizligi ýeterlik kiçi bolsa, onda sahypanyň ulanyjysy surat ýüklenýänçä boş suratly ýere "seredip" biler.

Aslynda img teginde load wakasy bar, bu waka suratyň ýüklenmesi tamamlananda işleýär:

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

image.addEventListener('load', function() {
	// surat ýüklenende işleýär
});

Biz muny, sahypada suraty diňe surat ýüklenen wagty ýerleşdirmek üçin ulanyp bileris:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // ýüklenende ýerleşdirýäris
});

Surat hökmany ýüklenmez: mümkin surat ýoly nädogry bolsa, ýa-da internet kesilse, sahypa serweri ýaralyp ýa-da şuňa meňzeş bir zat bolup bilýär. Başga sözler bilen aýdylanda - ýüz tutulýan ýagdaý. Bu ýagdaýda load wakasy däl, eýsem error wakasy işleýär:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// surat ýüklemekde säwlik
});

Bir düwme ýasap, oňa basylanda surat ýüklenmegi üpjün ediň. Suraty, ol ýüklenen wagty görkeziň. Surat ýüklemekde problem ýüze çyksa hat bildirişini görkeziň.