Técnica para priorizar la descarga de imágenes en el navegador web

Tengo una página web que contiene muchas imágenes en miniatura (aproximadamente 100). Cuando hace clic en una de las miniaturas, se crea una ventana emergente modal, que en realidad es una nueva página web dentro de un iframe. Esta nueva página web contiene 1 imagen grande.Técnica para priorizar la descarga de imágenes en el navegador web

El problema se produce cuando el usuario abre la ventana emergente antes de que todas las más de 100 miniaturas hayan terminado de descargarse en la página principal. El usuario ahora debe esperar mucho tiempo antes de poder ver la imagen grande en la ventana emergente, porque el navegador no sabe priorizar esta nueva imagen sobre las miniaturas que ya está tratando de recuperar.

¿Alguna idea de una solución a este problema?

Fuente

2012-08-16 cbp

¿Podemos ver la página web? Mi pregunta principal es si las miniaturas se pregeneraron o si se están reduciendo en el lado del cliente. –

¿Todas las imágenes se pueden ver arriba del doblez en la carga de la página? – Paul

Lamentablemente, la página está en una intranet. No todas las imágenes están arriba del doblez, algunas están abajo. Las miniaturas están pregeneradas. – cbp

Cuando se carga la página, el navegador pone en cola 100 solicitudes de las miniaturas. No hay forma de que sepa eliminar elementos de la cola de solicitudes. Dependiendo del navegador, puede solicitar hasta 6 al mismo tiempo (refiriéndose a this thread), pero seguirán en cola antes de la imagen grande de su diálogo modal. Lo que puede hacer (desde ese mismo hilo) es alojar las imágenes de diálogo modal en un subdominio separado para que el navegador las coloque en una cola separada, como si estuvieran en sitios completamente diferentes. Esa nueva cola se podría ejecutar simultáneamente con sus solicitudes de miniaturas.

Fuente

2012-08-16 22:54:08

Sí, esta es probablemente la solución más fácil – cbp

Interesante pregunta. Nunca me he encontrado con una situación así. Una solución que se me ocurre es cargar las imágenes en miniatura solo cuando el usuario las esté viendo.

Si está utilizando jQuery, se podría tratar de usar este plugin:

Lazy Load Plugin for jQuery

Fuente

2012-08-16 22:52:27

Gracias, sí, eso es algo que vale la pena intentar. – cbp

Una forma de resolver esto es combinar sus miniaturas pequeñas en una gran imagen de mosaico, reduciendo el número de imágenes en la página.

Fuente

2012-08-16 22:56:41 tenfour

Sí, eso funcionaría. Sin embargo, probablemente sería bastante complicado en nuestro escenario ya que las nuevas miniaturas se crean con frecuencia (es como un sistema de buzón de documentos, con las miniaturas como vistas previas de los documentos en el buzón). – cbp

Puede usar el URI de datos BASE64 para todas las imágenes pequeñas. Su página puede aumentar de tamaño pero en algunas instalaciones: la carga de toda la página se hizo más rápida.

La otra opción: cargar la imagen grande desde otro subdominio, ya que la "cola" es por nombre de host.

Fuente

2012-08-16 22:56:59

Técnica para priorizar la descarga de imágenes en el navegador web

Respuesta

Cuestiones relacionadas