Assincronicidade de carregamento de imagens em JavaScript

Imagens que são criadas dinamicamente via JavaScript também são carregadas de forma assíncrona. Vamos considerar o seguinte código como exemplo:

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

Como você pode ver, aqui nós criamos uma tag img, atribuímos ao seu src o caminho para a imagem e a colocamos no body. A imagem, no entanto, não aparecerá na página imediatamente. O fato é que quando atribuímos ao src o caminho para a imagem - o navegador inicia o download dessa imagem do site. Somente quando a imagem for baixada é que o navegador poderá exibi-la.

Se a imagem for suficientemente grande, e a velocidade da internet for suficientemente baixa, o usuário do site poderá "apreciar" por algum tempo uma imagem vazia - até que ela seja carregada.

Na verdade, a tag img possui um evento load, que é acionado quando o carregamento da imagem é concluído:

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

image.addEventListener('load', function() {
  // será acionado quando a imagem carregar
});

Podemos usar isso para colocar a imagem na página apenas quando ela estiver carregada:

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

image.addEventListener('load', function() {
  document.body.appendChild(image); // colocamos quando carregar
});

A imagem pode não carregar: pode acontecer do caminho para a imagem estar incorreto, ou ocorrer uma queda de internet, falha no servidor do site ou algo similar. Em outras palavras - uma situação excepcional. Nesse caso, não será o evento load que será acionado, mas sim o evento error:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // erro no carregamento da imagem
});