Inércia Sensorial

2005-11-11

Pré-carregar imagem

Filed under: Javascript — inerte @ 14:16

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

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

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

1
2
3
4
5
6
7
// 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.

20 Comments »

  1. Muito bom script, valeu!

    Comment by Borg — 2006-09-12 @ 14:57

  2. Estava precisando disso mesmo. Valeu.

    Comment by Tiago Celestino — 2007-04-13 @ 10:17

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

    Comment by André — 2007-05-29 @ 13:56

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

    Comment by inerte — 2007-05-29 @ 15:22

  5. 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?

    Comment by João Carlos Rosseto — 2007-11-21 @ 23:36

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

    Comment by inerte — 2007-11-22 @ 13:57

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

    Comment by Lucas — 2009-06-15 @ 20:48

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

    Comment by inerte — 2009-06-21 @ 11:49

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

    Comment by Lucas — 2009-06-21 @ 20:06

  10. 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?

    Comment by Gustavo — 2009-08-10 @ 14:44

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

    Comment by inerte — 2009-08-10 @ 17:54

  12. OK, entendi. Obrigado

    Comment by Gustavo — 2009-08-13 @ 15:22

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

    Comment by Anderson — 2009-10-26 @ 04:29

  14. Ótimo, bem o que eu precisava 😉
    Vlws!

    Comment by Anderson — 2009-11-10 @ 12:36

  15. 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).

    Comment by inerte — 2009-11-12 @ 11:11

  16. como faço para colocar uma mensagem de que as imagens estao carregando?

    Comment by lidiapu7 — 2009-11-13 @ 10:39

  17. Vlw

    Comment by Fagner — 2009-12-23 @ 16:45

  18. Cara esse script me ajudou bastante ;). Tenho um site de anúncios onde cada anúncio tem tres imagens: a miniatura a media e a que da um zoom ao passar o mouse, meu grande problema era a imagem do zoom que só era carregada ao passar o mouse isso poderia entediar o pessoal que acessava o site, agora com seu script elas são carregadas em segundo plano dando muito mais rapidez pro anuncio valeu mesmo!

    Comment by André Kiffer — 2010-07-08 @ 11:14

  19. ola eu queria saber se ao carregar as imagens tem como mostrar uma barra de progreço? tipo de 0 a 100% igual em flash e tipo se eu tenho um slide feito em gif tipo uma porrada de gif so que esses gifs sao mostrados na tela somente quando o usuario faz uma requisiçao ao bd é uma especie de jogo ai eu queria que carregasse todas as imagens e animaçoes para depois começar o game sera que seu codigo consegue?

    e parabens pelo seu tutorial e muito bom ja me deu uma grande luz so falta eu alcaça-la.

    Comment by Vidaloka_v8 — 2010-12-21 @ 00:10

  20. Maneiro cara, muito bom

    Comment by Dege — 2011-03-06 @ 18:15

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.

Powered by WordPress