Pré-carregar imagem

O pré-carregamento de imagens em Javascript ajuda com troca de imagens, por exemplo nos eventos de clique ou passagem do mouse (onmousedown e onmouseover), pois o visitante não precisará esperar ser carregada a imagem apenas quando o navegador disparar o evento.

O pré-carregamento é feito com o seguinte código (lembre-se de colocar isso dentro de <script> e/ou <head>:

var imagem = new Image();
imagem.src = "caminho/arquivo.gif";

O código inicia um novo objeto do tipo Image e especifica o atributo scr com o caminho da imagem. Para os mais espertinhos da platÃ©ia, sim, isso Ã© o mesmo que:

Para cada imagem a ser pré-carregada, você deve iniciar um objeto e especificar o src, duas, três, quatro vezes e assim por diante.

Para facilitar, vale a pena colocar numa matriz todas as imagens que você deseja carregar e apenas dar um laço nela.

// Lista do caminho e nome dos arquivos de imagem. Pode ter quantas vocÃª quiser :)
imagem_lista = Array('arquivo.gif', 'arquivo2.gif', 'arquivo3.gif');
imagem_qtd = imagem_lista.length;
for (i = 0; i &lt; imagem_qtd; i++) {
    var preload = new Image();
    preload.src = imagem_lista[i];
}

E pronto 🙂 Todas as imagens da matriz imagem_lista serão carregadas pelo navegador quando o script acima rodar.

Posted

2005-11-11