Asynchronní načítání obrázků v JavaScriptu

Obrázky, které jsou dynamicky vytvářeny pomocí JavaScriptu, se také načítají asynchronně. Pro příklad uvažujme následující kód:

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

Jak vidíte, zde vytváříme tag img, zapíšeme do jeho src cestu k obrázku a umístíme tento obrázek do body. Obrázek se však na stránce neobjeví okamžitě. Jde o to, že když zapíšeme do src cestu k obrázku - prohlížeč začne stahovat tento obrázek ze stránky. Jakmile bude obrázek stažen, teprve tehdy jej prohlížeč bude schopen zobrazit.

Pokud je obrázek dostatečně velký a rychlost internetu dostatečně malá, bude se uživatel stránky nějakou dobu moci "pokochat" prázdným obrázkem - dokud se nenačte.

Ve skutečnosti pro tag img existuje událost load, která se aktivuje po dokončení načítání obrázku:

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

image.addEventListener('load', function() {
	// aktivuje se po načtení obrázku
});

Můžeme toho využít k tomu, abychom umístili obrázek na stránku teprve tehdy, když bude tento obrázek načten:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // umístíme po načtení
});

Obrázek se nemusí nutně načíst: může nastat situace, že cesta k obrázku je nesprávná, nebo dojde k přerušení internetu, poruše serveru stránky nebo něco podobného. Jinými slovy - výjimečná situace. V tomto případě se neaktivuje událost load, ale událost error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// chyba načtení obrázku
});

Vytvořte tlačítko, po jehož stisknutí se načte obrázek. Zobrazte obrázek, až bude načten. V případě problémů s načtením obrázku vypište zprávu.