JavaScript-ում նկարների ասինխրոն բեռնում

JavaScript-ի միջոցով դինամիկ կերպով ստեղծված նկարները նույնպես բեռնվում են ասինխրոն: Որպես օրինակ դիտարկենք հետևյալ կոդը:

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

Ինչպես տեսնում եք, այստեղ մենք ստեղծում ենք img թեգը, գրում ենք դրա src-ում նկարի ուղին և տեղադրում ենք այս նկարը body-ում: Սակայն նկարը էջում անմիջապես չի հայտնվի: Բանն այն է, որ երբ մենք գրեցինք src-ում նկարի ուղին՝ բրաուզերը սկսում է ներբեռնել այդ նկարը կայքից: Երբ նկարը լրիվ ներբեռնվի, միայն այդ ժամանակ բրաուզերը կկարողանա այն ցուցադրել:

Եթե նկարը բավականաչափ մեծ է, իսկ ինտերնետի արագությունը՝ բավականաչափ ցածր, ապա կայքի օգտատերը որոշ ժամանակ կկարողանա «հիանալ» դատարկ նկարով՝ մինչև այն բեռնվի:

Իրականում img թեգն ունի load իրադարձությունը, որն աշխատում է նկարի բեռնումն ավարտվելու պահին:

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

image.addEventListener('load', function() {
	// կաշխատի նկարի բեռնվելուց հետո
});

Մենք կարող ենք օգտագործել սա, որպեսզի նկարը տեղադրենք էջում միայն այն ժամանակ, երբ այդ նկարը բեռնված կլինի:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // տեղադրում ենք բեռնվելուց հետո
});

Նկարը պարտադիր չէ, որ կբեռնվի. կարող է պատահել, որ նկարի ուղին սխալ է, կամ ինտերնետի կապը կկտրվի, կայքի սերվերի խափանում կլինի կամ նման մի բան: Այլ կերպ ասած՝ բացառիկ իրավիճակ: Այս դեպքում կաշխատի ոչ թե load իրադարձությունը, այլ error իրադարձությունը:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// նկարի բեռնման սխալ
});

Ստեղծեք կոճակ, որի սեղմման դեպքում կբեռնվի նկար: Ցուցադրեք նկարը, երբ այն բեռնվի: Խնդրի դեպքում արտածեք հաղորդագրություն նկարի բեռնման հետ կապված: