Asynchroniczne ładowanie obrazów w JavaScript

Obrazy, które są dynamicznie tworzone przez JavaScript, również ładują się asynchronicznie. Rozważmy dla przykładu następujący kod:

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

Jak widzisz, tutaj tworzymy znacznik img, wpisujemy w jego src ścieżkę do obrazu i umieszczamy ten obraz w body. Obraz jednak nie pojawi się na stronie natychmiast. Chodzi o to, że kiedy wpisaliśmy w src ścieżkę do obrazu - przeglądarka zaczyna pobierać ten obraz ze strony. Dopiero gdy obraz zostanie pobrany, dopiero wtedy przeglądarka będzie mogła go pokazać.

Jeśli obraz jest wystarczająco duży, a prędkość internetu wystarczająco mała, to użytkownik strony przez pewien czas będzie mógł "podziwiać" pusty obraz - dopóki się nie załaduje.

W rzeczywistości znacznik img posiada zdarzenie load, które wyzwala się po zakończeniu ładowania obrazu:

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

image.addEventListener('load', function() {
  // wywoła się po załadowaniu obrazu
});

Możemy tego użyć, aby umieścić obraz na stronie tylko wtedy, gdy ten obraz zostanie załadowany:

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

image.addEventListener('load', function() {
  document.body.appendChild(image); // umieszczamy po załadowaniu
});

Obraz niekoniecznie się załaduje: może być tak, że ścieżka do obrazu jest nieprawidłowa, lub nastąpi zerwanie połączenia internetowego, awaria serwera ze stroną lub coś podobnego. Mówiąc innymi słowy - sytuacja wyjątkowa. W tym przypadku wyzwoli się nie zdarzenie load, a zdarzenie error:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // błąd ładowania obrazu
});