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() {
	// сүрөттү жүктөөдө ката
});

Басылганда сүрөт жүктөлүүчү баскычты жасаңыз. Сүрөт жүктөлгөндө, аны көрсөтүңүз. Сүрөттү жүктөөдө көйгөй чыкса, билдирүү чыгарыңыз.