Carregando imagens através de callbacks assíncronos em JavaScript
Vamos implementar a função loadImage,
que irá carregar imagens. Deixe o primeiro
parâmetro desta função receber o caminho para a imagem,
e o segundo - um callback que será executado quando
a imagem for carregada:
loadImage('img.png', function() {
// será executado quando a imagem carregar
});
Deixe o primeiro parâmetro do nosso callback receber a referência ao elemento DOM da imagem, e o segundo - um erro, se ocorrer uma situação excepcional:
loadImage('img.png', function(image, err) {
console.log(image, err);
});
Podemos usar nossa função da seguinte forma:
loadImage('image.png', function(image, err) {
document.body.append(image); // colocaremos a imagem quando carregar
});
Ou com o tratamento da situação excepcional:
loadImage('image.png', function(image, err) {
if (!err) {
document.body.append(image);
} else {
console.log('ocorreu um erro: ' + err);
}
});
Implemente a função loadImage. Use
para isso o
código para carregamento
de imagens que você estudou anteriormente.