Afbeeldingen laden via asynchrone callbacks in JavaScript
Laten we een functie loadImage implementeren,
die afbeeldingen zal laden. Laat het eerste
parameter van deze functie het pad naar de afbeelding zijn,
en de tweede - een callback, die wordt uitgevoerd wanneer
de afbeelding is geladen:
loadImage('img.png', function() {
// wordt uitgevoerd bij het laden van de afbeelding
});
Laat in de eerste parameter van onze callback een link naar het DOM-element van de afbeelding komen, en in de tweede - een fout, als er een uitzonderlijke situatie optreedt:
loadImage('img.png', function(image, err) {
console.log(image, err);
});
We kunnen onze functie als volgt gebruiken:
loadImage('image.png', function(image, err) {
document.body.append(image); // plaats de afbeelding na het laden
});
Of met afhandeling van een uitzonderlijke situatie:
loadImage('image.png', function(image, err) {
if (!err) {
document.body.append(image);
} else {
console.log('er is een fout opgetreden: ' + err);
}
});
Implementeer de functie loadImage. Gebruik
hiervoor de eerder door u bestudeerde
code voor het laden
van afbeeldingen.