Асинхронно вчитување на слики во 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() {
  // грешка при вчитување на сликата
});