Asinkronishtësia e ngarkimit të imazheve në JavaScript

Imazhet që krijohen në mënyrë dinamike përmes JavaScript, gjithashtu ngarkohen në mënyrë asinkrone. Le të shqyrtojmë kodin e mëposhtëm si shembull:

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

Siç e shihni, këtu ne krijojmë një tag img, shkruajmë në src të tij rrugën për tek imazhi dhe e vendosim këtë imazh në body. Megjithatë, imazhi nuk do të shfaqet menjëherë në faqe. Çështja është se kur ne shkruajmë në src rrugën për tek imazhi - shfletuesi fillon ta shkarkojë këtë imazh nga faqja e internetit. Vetëm pasi të jetë shkarkuar imazhi, atëherë shfletuesi do të jetë në gjendje ta shfaqë atë.

Nëse imazhi është mjaft i madh, dhe shpejtësia e internetit është mjaft e ulët, atëherë përdoruesi i faqes për një kohë do të mund të "admirojë" një imazh bosh - derisa të ngarkohet.

Në fakt, tag-u img ka ngjarjen load, e cila aktivizohet në përfundim të ngarkimit të imazhit:

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

image.addEventListener('load', function() {
	// do të aktivizohet pas ngarkimit të imazhit
});

Ne mund ta përdorim këtë, për të vendosur imazhin në faqe, vetëm kur ky imazh të jetë ngarkuar:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // vendosim pas ngarkimit
});

Imazhi nuk do të ngarkohet domosdoshmërisht: mund të ndodhë që rruga për tek imazhi të jetë e gabuar, ose të ndodhë një ndërprerje e internetit, dëmtim i serverit me faqen ose diçka e ngjashme. Me fjalë të tjera - situatë e jashtëzakonshme. Në këtë rast, nuk do të aktivizohet ngjarja load, por ngjarja error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// gabim në ngarkimin e imazhit
});

Bëni një buton, duke klikuar mbi të cilin do të ngarkohet një imazh. Shfaqni imazhin, kur ai të jetë ngarkuar. Shfaqni një mesazh në rast problemesh me ngarkimin e imazhit.