Optimizar javascript pre-cargar de imágenes

Question

Me preguntaba si alguien tiene alguna estrategia para optimizar la precarga de imágenes a través de javascript?

Estoy portando una aplicación Flash en html/css, intentando recrear la interfaz de usuario tan cerca del sitio original como sea posible. Es esencialmente una aplicación de navegador de fotos, donde se muestra una imagen de alta resolución cuando el usuario se desplaza sobre un enlace. Hay alrededor de 50 a 80 de estas imágenes por página.

La precarga de todas las imágenes individualmente crea un tiempo de carga significativamente mayor que el de la aplicación Flash. La cantidad de datos es la misma, pero debo suponer que el mayor tiempo de carga se debe al número de viajes de ida y vuelta que se deben realizar en el servidor para cada imagen.

Además, estoy mirando un tiempo de carga significativo para cada página incluso después de que las imágenes hayan sido almacenadas en caché, porque la página aún necesita contactar al servidor para que cada imagen reciba el código 304 No modificado.

¿Alguien tiene alguna sugerencia para acelerar esto? ¿Tendría sentido intentar crear un enorme elemento de imagen que se descargue en una sola solicitud en lugar de 50 a 80 imágenes más pequeñas que cada una de ellas recibe una sola solicitud? El objetivo aquí es lograr un tiempo de carga similar al sitio Flash.

Gracias. Sé que esto no suena como una forma ideal de hacer las cosas.

Answer 1

Como usted ha señalado - uno de los factores más comunes que influye en los tiempos de carga de páginas web modernos son el gran número de pequeñas imágenes que se envían entre el cliente y el servidor. Algunos estudios recientes indican que para más de 20 imágenes, el 80% del tiempo de carga se va a gastar en la latencia de hacer esto, ¡y no en la descarga!

Una herramienta llamada SmartSprites es una forma muy práctica de "compilar" una única imagen grande de todas sus muchas pequeñas imágenes que lograrán tiempos de carga mucho más rápidos y la captación previa de imágenes. Aquí está el enlace http://smartsprites.osinski.name/

Answer 2

Yo diría que usar CSS sprites es uno grande. Tener todas tus imágenes, o imágenes de una naturaleza similar en una sola solicitud HTTP, realmente ayuda a cargar el tiempo. Descargar 10 imágenes con un tamaño de archivo total de 100kb va a ser más lento que descargar 1 imagen del mismo tamaño. También ayuda a que las imágenes bajen antes de que se requieran en el caso de los eventos de desplazamiento y mouse sobre eventos y generalmente hacen las cosas mucho más suaves.

Answer 3

Si no necesita todas las imágenes de inmediato, puede utilizar la función window.timeout() para hacer algunos de los trabajos después de la página se ha inicializado.

Además, si utiliza una imagen en varios lugares, puede evitar varias llamadas al servidor colocando la imagen en un estilo CSS y reutilizando ese estilo en lugar de la imagen.

Answer 4

Usar un sprite es bueno si está bien con esa solución. Además, lo que intentaré es detectar URI de datos en ese navegador y hacer que el script cargue diferentes hojas de estilo basadas en esa información. Una hoja de estilo con URI de datos codificados en base 64 y la otra con una URL real para el elemento sprite. El archivo CSS también es almacenable en caché.

Aquí hay un technique to detect data URIs support o puede utilizar IE comentarios condicionales o ... hay algunos workarounds for sending IE encoded image strings, en respuestas HTTP de varias partes.

Answer 5

Use Sprite Me. Y no se pierda el blogposts sobre el creation de esta herramienta.