EN FR ES
Diseño de páginas web en Guadalajara.
Cómo programar una carga progresiva de imágenes en una web estática

Cómo programar una carga progresiva de imágenes en una web estática

07/Jun/2018

Hoy en día, es fundamental optimizar el tiempo de carga de las páginas web que programemos, asegurándonos que la carga inicial de la web sea lo más rápida posible.

Es común que determinadas páginas de nuestra web, muestren colecciones de imágenes o vídeos, estando en ocasiones compuestas por un gran número de ellas. Si estamos programando una página dinámica, lo óptimo será que inicialmente la página sólo contenga las etiquetas img, iframe y/o vídeo, que quepan en el tamaño inicial del navegador, y que, según se desplaza hacia abajo el usuario, realicemos llamadas al servidor y añadamos las imágenes siguientes a su contenedor (div, section).

Otra cosa es una página estática en la que todas las imágenes y/o vídeos han de estar incluidas en el código en el momento de la carga, lo cual además de retrasarla, implica el gasto de datos en dispositivos móviles al descargar imágenes que no sabemos si finalmente verá el usuario.

Aquí os dejo una solución sencilla utilizando los datos de usuario y una pequeña función en Javascript.

Pasos:

  • Todas las imágenes y/o vídeos de la colección estarán dentro de un mismo contenedor (aunque estén luego dentro de distintos subcontenedores). En el ejemplo de asignaremos el ID "coleccion".
  • En vez de asignar la url de la imagen o vídeo al atributo src se lo asignaremos a data-src
  • Opcionalmente, para cumplir con el W3C podremos asignar al atributo src la URL de una imagen cuadrada (cuadrada si las imágenes son de distinto tamaño, si no del tamaño exacto que tengan las imágenes) y transparente.
  • Programaremos una función que detecte si la imagen ya ha aparecido o está próxima a aparecer en la ventana del navegador, y, en ese caso, la muestre.
  • Invocaremos a esta función tras finalizar la carga de la página, al cambiar su tamaño y al subir y bajar por ella (onload, onresize, onscroll).

Ejemplo documentado:

 Haz click aquí para acceder al ejemplo documentado.

Espero que os sea de utilidad.

Compártelo:   Facebook   Twitter

 

 

Cerrar

 

 

Aceptar      Cancelar