Asynchrone afbeeldingen laden in JavaScript
Afbeeldingen die dynamisch worden aangemaakt via JavaScript, worden ook asynchroon geladen. Laten we als voorbeeld de volgende code bekijken:
let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);
Zoals je ziet, maken we hier een img-tag aan,
schrijven we in zijn src het pad naar de afbeelding
en plaatsen we deze afbeelding in de body.
De afbeelding zal echter niet direct op de pagina verschijnen.
Het punt is dat wanneer we in src
het pad naar de afbeelding schrijven - de browser begint
deze afbeelding van de website te downloaden. Pas wanneer de afbeelding
is gedownload, kan de browser
hem weergeven.
Als de afbeelding vrij groot is, en de snelheid van het internet vrij laag, dan kan de gebruiker van de website enige tijd "genieten" van een lege afbeelding - totdat deze is geladen.
Eigenlijk heeft de img-tag een
gebeurtenis load, die wordt geactiveerd
bij het voltooien van het laden van de afbeelding:
let image = document.createElement('img');
image.src = 'img.png';
image.addEventListener('load', function() {
// wordt geactiveerd wanneer de afbeelding is geladen
});
We kunnen dit gebruiken om de afbeelding op de pagina te plaatsen, alleen wanneer deze afbeelding is geladen:
let image = document.createElement('img');
image.src = 'img.png';
image.addEventListener('load', function() {
document.body.appendChild(image); // plaatsen na het laden
});
De afbeelding wordt niet noodzakelijk geladen: het kan
zijn dat het pad naar de afbeelding onjuist is,
of er treedt een internetonderbreking op, een storing
van de server van de website of iets dergelijks. Met andere
woorden - een uitzonderlijke situatie.
In dat geval wordt niet de gebeurtenis load geactiveerd,
maar de gebeurtenis error:
let image = document.createElement('img');
image.src = 'img.png';
image.addEventListener('load', function() {
document.body.appendChild(image);
});
image.addEventListener('error', function() {
// fout bij het laden van de afbeelding
});
Maak een knop, waarop wanneer erop wordt geklikt een afbeelding wordt geladen. Toon de afbeelding wanneer deze is geladen. Geef een bericht weer in geval van problemen met het laden van de afbeelding.
