JavaScript'те сүрөттөрдү асинхрондүү жүктөө

JavaScript аркылуу динамикалык түзүлгөн сүрөттөр дагы асинхрондүү жүктөлөт. Мисал үчүн төмөнкү кодду карап көрөлү:

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

Көрүнүп тургандай, биз бул жерде img тегин түзөбүз, анын src атрибутуна сүрөттүн жолун жазабыз жана бул сүрөттү bodyге орнотобуз. Бирок, сүрөт баракта дароо пайда болбойт. Иш жүзүндө, биз srcке сүрөттүн жолун жазып бүткөндө - браузер бул сүрөттү сайттан жүктөй баштайт. Сүрөт жүктөлүп бүткөндөн кийин гана браузер аны көрсөтө алат.

Эгерде сүрөт өтө чоң болсо, ал эми интернет ылдамдыгы жетишээрлик төмөн болсо, анда сайттын колдонуучусу сүрөт жүктөлгөнгө чейин бир аз убакыт бош сүрөткө "сүйүнүп" калышы мүмкүн.

Чынында, img тегинде load окуясы бар, ал сүрөт жүктөлүп бүткөндө ишке ашат:

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

image.addEventListener('load', function() {
  // сүрөт жүктөлгөндө ишке ашат
});

Биз муну сүрөттү баракка, так ошол сүрөт жүктөлгөндө гана орнотуу үчүн колдонсок болот:

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

image.addEventListener('load', function() {
  document.body.appendChild(image); // жүктөлгөндө орнотот
});

Сүрөт милдеттүү түрдө жүктөлбөшү мүмкүн: сүрөткө жол туура эмес болушу мүмкүн, же интернет туташы үзүлүп калышы, сайт серверинин бузулушу же ушундай бир нерсе болушу мүмкүн. Башкача айтканда - кечирилбөөчү абал. Бул учурда load окуясы эмес, error окуясы ишке ашат:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // сүрөттү жүктөөдө ката
});