9.2 - Criando objetos Image com new

É possível também criar objetos image diretamente através do construtor Image().

O principal uso deste construtor é permitir que uma imagem seja carregada através da internet e decodificada pelo navegador, antes mesmo que a sua utilização seja necessária, o que no exemplo anterior, só acontecerá quando e se o usuário passar com o mouse sobre uma determinada imagem. Como cada imagem adicional é um arquivo separado que precisa ser trazido do servidor, é melhor trazer esses arquivos todos de uma vez no momento da carga da página do que ter que esperar a imagem ser carregada durante a interação do usuário, o que pode inviabilizar toda a idéia do efeito criado. É claro que essas observações podem se tornar insignificantes caso estejamos lidando com uma conexão extremamente rápida e com imagens muito pequenas. De qualquer forma, normalmente é recomendável fazer a carga das imagens previamente através do construtor Image(), como no código abaixo.

myImage= new Image()
myImage.src= "outra.gif"
...
document.images[0].src=myImage.src

Compare agora os dois exemplos a seguir. Eles fazem exatamente a mesma coisa, com a única diferença de que o primeiro exemplo não carrega as imagens antecipadamente e o segundo o faz. Pelos motivos expostos anteriormente, é possível que você não sinta muita diferença prática no que diz respeito ao tempo de carga das imagens quando interagir com as páginas.