Ładowanie obrazów przez asynchroniczne callbacki w JavaScript
Zaimplementujmy funkcję loadImage,
która będzie ładować obrazy. Niech pierwszym
parametrem ta funkcja przyjmuje ścieżkę do obrazu,
a drugim - callback, który wykona się, gdy
obraz zostanie załadowany:
loadImage('img.png', function() {
// wykona się po załadowaniu obrazu
});
Niech w pierwszym parametrze naszego callbacka trafi się odnośnik do DOM elementu obrazu, a w drugim - błąd, jeśli wystąpi sytuacja wyjątkowa:
loadImage('img.png', function(image, err) {
console.log(image, err);
});
Możemy użyć naszej funkcji w następujący sposób:
loadImage('image.png', function(image, err) {
document.body.append(image); // umieścimy obraz po załadowaniu
});
Albo z obsługą sytuacji wyjątkowej:
loadImage('image.png', function(image, err) {
if (!err) {
document.body.append(image);
} else {
console.log('wystąpił błąd: ' + err);
}
});
Zaimplementuj funkcję loadImage. Użyj
do tego poznanego wcześniej
kodu do ładowania
obrazów.