JavaScriptda rasm yuklashning asinxronligi

JavaScript orqali dinamik yaratilgan rasmlar ham asinxron ravishda yuklanadi. Misol sifatida quyidagi kodni ko'rib chiqamiz:

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

Ko'rib turganingizdek, biz bu yerda img tegi yaratamiz, uning src atributiga rasm manzilini yozamiz va ushbu rasmni body ga joylaymiz. Biroq, rasm sahifada darhol paydo bo'lmaydi. Gap shundaki, biz src ga rasm manzilini yozganimizda - brauzer ushbu rasmni saytdan yuklay boshlaydi. Rasm yuklanganidan so'ng, faqat shundan keyin brauzer uni ko'rsata oladi.

Agar rasm etarlicha katta bo'lsa va internet tezligi etarlicha past bo'lsa, sayt foydalanuvchisi bir muncha vaqt rasm yuklanguncha bo'sh rasmni "ko'rib" o'tirishi mumkin.

Aslida, img tegida load hodisasi mavjud bo'lib, rasm yuklanishi tugaganda ishga tushadi:

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

image.addEventListener('load', function() {
	// rasm yuklanganida ishga tushadi
});

Biz buni rasmni sahifaga faqat yuklangandan so'ng joylash uchun ishlatishimiz mumkin:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // yuklanganidan so'ng joylaymiz
});

Rasm yuklanmasligi ham mumkin: rasm manzili noto'g'ri bo'lishi, internet uzilishi, sayt serverining ishdan chiqishi yoki shunga o'xshash narsalar yuz berishi mumkin. Boshqacha qilib aytganda - istisno vaziyat. Bunday holda load hodisasi emas, balki error hodisasi ishga tushadi:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// rasm yuklashda xatolik
});

Tugma yarating, bosilganda rasm yuklansin. Rasm yuklangandan so'ng uni ko'rsating. Rasm yuklashda muammo bo'lsa, xabar chiqaring.