Асинхронност на зареждане на изображения в 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() {
  // грешка при зареждане на изображението
});