Inércia Sensorial

Pré-carregar imagem

Comments 11 de November, 2005 sob Javascript.
Tags:

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>:

PLAIN TEXT

JAVASCRIPT:

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:

PLAIN TEXT

HTML:

<img src="caminho/arquivo.gif" />

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.

PLAIN TEXT

JAVASCRIPT:

// 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 <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.

Borg

Muito bom script, valeu!

Tiago Celestino

Estava precisando disso mesmo. Valeu.

André

E como faço para utilizar? Não entendi muito bem. Sou noob em javascript.

inerte

Basta colocar o código dentro das tags que abrem e fecham Javascript no header, tipo:

<html>
<head>
<title>Exemplo</title>
<script type="text/javascript">
// O código
</script>
</head>
<body>
</body>
</html>

É só a página ser aberta, executando o código, que as imagens estarão pré-carregadas.

João Carlos Rosseto

Deixa-me entender melhor:

Se as imagens não precisassem ser exibidas de imediato, eu poderia estar preenchendo um formulário enquanto as imagens estão sendo baixadas sem que isto atrapalhasse o preenchimento do formulário?

inerte

Apesar disso ser possível, não é o objetivo do código dessa página. Aqui estou carregando as imagens *antes* do restante da página. Também dá para carregar depois, mas o truque seria outro.

Lucas

Olá, Muito bom seu script.
Gostaria de saber se é possivel adapta-lo para pré-carregar vídeos. quais seriam as alterações necessárias?

inerte

Oi Lucas, não sei direito se há uma maneira correta de pré-carregar vídeos. O conceito de pré-carregamento envolve requisitar o conteúdo antes dele ser utilizado, e assim como as imagens aqui, imagino que bastaria chamar o vídeo, mas lembre-se que se ele é um flv mostrado em um swf, é o swf que você deve pré-carregar.

Lucas

Olá Inerte! Obrigado por responder.
eu preciso é pré-carregar vídeos no formato dvix, no html.
mas seriam uns 10 vídeos. como uma lista de reprodução. e o que eu precisava é quê:
quanto o primeiro videos está sendo assistido ja fosse pre-carregando o segundo, tercveiro. etc.
se souber uma forma eu agradeço.

Obrigado.
Abraço.

Gustavo

tenho uma dúvida: e se o navegador do visitante do site não permitir scripts. as imagens não serão carregadas ou serão carregadas do modo padrão?

inerte

Oi Gustavo,

Se você está usando <img /> com src normal, sim, o navegador irá mostrar a imagem mesmo que não tenha conseguido pré carregá-la via script.

Gustavo

OK, entendi. Obrigado

Anderson

Tenho algumas imagens de background do css, esse script serve também?

inerte

Oi Anderson! Sim, o script funciona. O navegador vai ter já "pego" a imagem, não precisando recarregá-la portanto. Certifique-se que as imagens estão sendo servidas com parâmetros corretos de cache (Etag e/ou Last-Modified) e elas serão abaixadas com antecedência da segunda requisição (para o background do css).