JavaScript-də şəkillerin asinxron yüklənməsi

JavaScript vasitəsilə dinamik yaradılan şəkiller də asinxron şəkildə yüklənir. Nümunə üçün aşağıdakı kodu nəzərdən keçirək:

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

Gördüyünüz kimi, biz burada img teqini yaradırıq, onun src xüsusiyyətinə şəklin yolunu yazırıq və bu şəkli body-də yerləşdiririk. Lakin şəkil səhifədə dərhal peyda olmayacaq. Məsələ ondadır ki, biz src-ə şəklin yolunu yazdıqda - brauzer bu şəkli saytdan yükləməyə başlayır. Şəkil yüklənən kimi, yalnız o zaman brauzer onu göstərə biləcək.

Əgər şəkil kifayət qədər böyükdürsə, və internetin sürəti kifayət qədər aşağıdırsa, istifadəçi müəyyən müddət "boş" şəkilə baxa bilər - şəkil yüklənənə qədər.

Əslində img teqinin load adlı bir hadisəsi var, hansı ki, şəklin yüklənməsi başa çatdıqda işə düşür:

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

image.addEventListener('load', function() {
	// şəkil yüklənəndə işləyəcək
});

Biz bundan, şəkli səhifədə yalnız o zaman yerləşdirmək üçün istifadə edə bilərik, o şəkil yüklənəndə:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // yükləndikdə yerləşdiririk
});

Şəkil mütləq yüklənməyə bilər: ola bilər ki, şəklin yolu səhvdir, və ya internet kəsilib, veb server sıradan çıxıb və ya ona bənzər bir şey ola bilər. Başqa sözlə - istisnai vəziyyət. Bu halda load hadisəsi deyil, error hadisəsi işə düşəcək:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// şəklin yüklənmə xətası
});

Bir düymə hazırlayın, hansına kliklədikdə şəkil yüklənsin. Şəkli yükləndiyi zaman göstərin. Şəklin yüklənməsində problem olduqda mesaj çıxarın.