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

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

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

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

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

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

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

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

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

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

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

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

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

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