Muita gente me pede ajuda aqui no site sobre como apresentar uma imagem sem que ela demore tanto para aparecer. A solução, basicamente, é carregar a imagem antes que o usuário solicite a sua visualização. Uma imagem vai aparecer mais rápido na tela se ela já estiver em cache, ou seja, se já foi feito o seu download para o PC do usuário.
Os objetos de uma página web (figuras, textos, vídeos, sons) só são carregados para o PC do usuário quando solicitados, ou seja, quando algum código da página solicita tal arquivo.
Geralmente colocamos um link para uma imagem e somente quando o usuário clica nesse link é que a imagem é carregada. Podemos acelerar esse processo informando para a página que carregue a imagem logo quando possível, independentemente da ação do usuário. Como fazemos isso? De várias formas, mas mostrarei aqui uma que considero mais elegante; através de JavaScript.
Segue o Código:
1: <head>
2: "javascript">
3: imagem01 = new Image();
4: imagem01 = "www.seudominio.com.br/imagem01.gif";
5:
6: imagem02 = new Image();
7: imagem02 = "www.seudominio.com.br/imagem02.gif";
8:
9: imagem03 = new Image();
10: imagem03 = "www.seudominio.com.br/imagem03.gif";
11: </script>
12: </head>
Repare que esse script fica dentro da tag de cabeçalho do HTML (), forçando a sua execução assim que possível. Ele cria objetos do tipo “Image” e define o caminho da imagem. Fazendo isso, o browser do usuário já irá trazer a imagem do servidor para o PC do usuário, guardando ela em memória e, consequentemente, no cache.
A desvantagem desse script é que as imagens estão sendo carregadas junto com o conteúdo da página. Isso pode adiantar o carregamento das imagens e atrasar o carregamento da página. Uma sugestão é colocar esse script no final do arquivo HTML ou criar uma função que execute somente após o carregamento da página.
Além disso, você pode criar uma função repetitiva para carregar diversas imagens (através de um Array), mas essas coisas deixo para a sua imaginação e necessidade.
Oi Guilherme, mto boa dica, valeu!
Pra fazer em um loop, ou para carregar mais de uma imagem. Coloco isso em um “for”? Ou conseguiria fazer “imagem02 = array();”.
Abs!
Olá Marcelo!
Faz tempo que não programo, mas certamente uma solução com “for” ou “array” vai atender a sua necessidade. Infelizmente não posso te ajudar muito nisso agora pois até já esqueci da sintaxe do JavaScript.
Sugiro que pesquise no Google a utilização desses comandos.
Abs!
haha gosto desse macete!
melhor do que encher o codigo com aquelas funções!
Oi Bruno, seu código está super claro. No entanto, a url que chama o src da imagem é uma variável. Ex http://www.meusite.com/pagina.asp?registro=3 . Nese caso como ficaria o seu código :
ai amigao como faz para que ao enviar uma url de uma imagem no meu form ele abra a imagem na tela tipo eu tenho um chat simples ai eu digito na mensagem o seguint codigo ai ele envia para o formulario que me traz aquela mensagem como se nao estivesse a imagem no url mas a imagem ta la na mesma pasta da pagina que deveria carregala. voce pode me da um help?
legal cara.. ja conheci o "truque" mas hoje enquanto desenvolvia um script me deparei com a seguinte duvida:
se eu mandar carregar uma imagem de 5mb, por exemplo, teria como eu sair quando ele terminou de carregar a imagem?
Sim, a classe de imagem tem um método chamado onload.
seria algo do tipo:
imagem02 = new Image();
imagem02 = "www.seudominio.com.br/imagem02.gif";
imagem02.onload = function(){
alert('a imagem foi carregada');
};