JavaScriptда расмларни асинхрон юклаш

JavaScript орқали динамик равишда яратиладиган расмлар ҳам асинхрон юкланади. Мисол учун куйидаги кодни кўрайлик:

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

Кўриб турганингиздек, бу ерда биз img тегини яратамиз, унга src хусусиятига расм йўлини ёзамиз ва щу расмни bodyга жойлаштирамиз. Бирок, расм сахифада дароқ пайдо бўлмайди. Гap шуки, биз srcга расм йўлини ёзганимизда - браузер щу расмни веб-сайтдан юклаб олишни бошлайди. Расм юкланган пайтдагина, браузер уни кўрсата олади.

Aгар расм етарлича катта бўлса, ва интернет тезлиги етарлича паст бўлса, у щолда фойдаланувчи расм юклангунча бир вақт бўш расмни "кўриб" туриши мумкин.

Aслида, img теги учун load воқеаси мавжуд бўлиб, у расм юкланиб бўлганида ишга тушади:

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

image.addEventListener('load', function() {
	// расм юкланганда ишга тушади
});

Бiz бу воқеадан фойдаланиб, расмни факат юкланган пайтдагина сахифага жойлаштиришимиз мумкин:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // юкланганда жойлаштирамиз
});

Расм албатта юкланавермайди: бalkи расм йўли нотўғри бўлиши, yки интернет узилиб қолиши, сервернинг ишламай қолиши ёки ўхшащ щоллар юз белиши мумкин. Бошқа сўз билан айтганда - истисно ҳолати. Бундай щолда load воқеаси эмас, балки error воқеаси ишга тушади:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// расмни юклашда хатолик
});

Босилганда расм юкланадиган тугма яратинг. Расм юкланганда уни кўрсатинг. Расмни юклащда муаммо бўлса, щақида хабар чиқаринг.