Como pré -carregar as imagens para que elas sejam carregadas mais rapidamente em qualquer outro lugar da página e é uma boa prática?

Question

Aqui está a coisa: eu tenho um mapa do Google com muitos marcadores.

O problema é que o mapa carrega, fica vazio por um tempo e somente então os marcadores são exibidos. Os marcadores são PNGs personalizados.

Minha idéia é "pré -carregar" (não tenho certeza se é a palavra certa) para que eles apareçam quase ao mesmo tempo que o mapa.

O que fiz até agora é adicionar as mesmas imagens que eu uso no meu mapa, fora do mapa, no início da página em display:none;

Não tenho certeza, mas parece que o tempo entre o mapa e as imagens são exibidas foi reduzido.

É a melhor maneira de fazer isso e é uma boa prática?

Answer 1

Você pode usar "sprites", ou seja, uma coleção de imagens separadas em 1 único PNG. Isso tem a vantagem de exigir apenas 1 carga, ou seja, cargas menos separadas. O Google GWT empurra muito essa técnica (IE Pacotes de imagem).

O valor dessa técnica aumenta com o número de imagens discretas que requerem carregamento: as imagens mais separadas, mais tempo necessário para carregá -las.

Answer 2

Não use display:none para pré -carregar. Porque um elemento definido para display:none não renderiza algum De seus atributos físicos, o navegador não se incomoda em baixá -lo até que seja visível.

Uma alternativa é usar visibility:hidden, mas você corre o risco de encontrar um agente de usuário que faz praticamente a mesma coisa. visibility:hidden Requer que o navegador calcule o modelo da caixa para a imagem, que requer que a imagem seja carregada (para obter as dimensões). Não acredito que isso funcione no IE6, no entanto.

A última técnica (e a minha favorita) é criar uma div diretamente antes do seu </body> marcação. Posicioná -lo absoluto com left: -99999999px; top: -99999999px. O navegador é forçado a renderizar as imagens (e, consequentemente, carregá -las) e não há JavaScript confuso para lidar.

Agora, para integrar isso ao seu problema, coloque o código para o seu mapa do Google depois Sua "divisão de pré -carga". Seu navegador será forçado a carregar as imagens antes de executar o código para criar o mapa. Isso deve resolver seu problema.

Espero que isto ajude!

Answer 3

Pelo que me lembro da maioria dos navegadores modernos, as imagens são sempre carregadas uma vez (dado que o SRC da imagem é o mesmo). Eu acho que você quer dizer carregá -los antes da carga dos mapas.

Na minha opinião, não importa muito. Os marcadores devem ser relativamente leves em comparação com a própria imagem do mapa e eu realmente não posso usá -los sem o mapa de qualquer maneira.

Se você acha que melhora sua experiência do usuário, acho que é uma boa prática, mas eu tentaria obtê -los de uma maneira mais limpa, provavelmente uma chamada de Ajax no início da página da página?

Dar uma olhada em Ajax em ação: imagens de pré -carregamento