Cómo cargar previamente las imágenes de modo que carguen más rápido en cualquier otro sitio en la página, y es una buena práctica?

Question

Aquí está la cosa: Tengo un mapa de Google con una gran cantidad de marcadores en ella

.

El problema es que se carga el mapa, se queda vacía durante un tiempo y sólo entonces se muestran los marcadores. Los marcadores se PNGs personalizarse.

Mi idea es "precarga" ellos (no estoy seguro que es la palabra correcta) de forma que aparecen casi al mismo tiempo que el mapa.

Lo que hice hasta ahora es añadir las mismas imágenes que utilizo en mi mapa, fuera del mapa, al principio de la página en display:none;

No estoy seguro, pero parece que el tiempo entre el mapa y las imágenes se visualizan se ha reducido.

¿Es la mejor manera de hacerlo, y es una buena práctica?

Answer 1

Se puede usar "sprites" es decir, una colección de imágenes separadas en 1 sola png. Esto tiene la ventaja de requerir solamente 1 de carga es decir, cargas menos separadas. Google empuja GWT esta técnica mucho (es decir, paquetes de imagen).

El valor de esta técnica aumenta con el número de imágenes discretas que requieren de carga:. Las imágenes más separadas, más tiempo se tarda en cargar ellos

Answer 2

No utilice display:none de precarga. Debido a que un conjunto de elementos de display:none no hace cualquier de sus atributos físicos, el navegador no se molesta descargarlo hasta que se hace visible.

Una alternativa es utilizar visibility:hidden, pero se corre el riesgo de encontrarse con un agente de usuario que hace más o menos lo mismo. visibility:hidden requiere que el navegador calcule el modelo de caja de la imagen, lo que requiere que la imagen se carga (para obtener las dimensiones). No creo que esto funciona en IE6, sin embargo.

La última técnica (y mi favorito) es crear un div directamente antes de su etiqueta </body>. Posicionarlo absoluta con left: -99999999px; top: -99999999px. El navegador se ve obligado a hacer que las imágenes (y por consiguiente los carga) y no hay Javascript desordenado de tratar.

Ahora, para integrar esto con su problema, coloque el código de su mapa de Google después su "div precarga". Su navegador se verá obligado a cargar las imágenes antes de que se ejecute el código para crear el mapa. Esto debería resolver su problema.

Espero que esto ayude!

Answer 3

De lo que recuerdo de la mayoría de los navegadores modernos, las imágenes se cargan siempre una vez (dado el src de la imagen es la misma). Creo que se les refieres a cargar antes de la carga de mapas.

En mi opinión, en realidad no importa mucho. Los marcadores deben ser relativamente leve en comparación con la imagen del mapa en sí y yo realmente no pueden utilizarlos sin el mapa de todos modos.

Si usted piensa que usted mejorar la experiencia del usuario, entonces creo que es una buena práctica, pero que iba a tratar de conseguir que en una forma más limpia, probablemente, una llamada ajax temprano en la carga de la página?

Tome un vistazo a Ajax En Acción: Precarga Imágenes