Cuando un sitio web tiene muchas imágenes, como puede ser un periódico, revista, la web de un fotógrafo, etc... lo ideal, para que la página no tarde mucho en cargar y consuma mucho ancho de banda, es cargar las imágenes cuando se va haciendo scroll por la página.
La mejor manera de hacerlo es usando la librería lazy load de jQuery.
El fichero está disponible en DevRama.
Pasos a seguir para usar lazy load en una web hay que seguir los siguientes pasos:
1-Incluir, en la págna web donde se quiere usar lazy load, jQuery y el fichero jquery.devrama.lazyload.js descargado en la dirección especificada anteriormente.
2-Añadir el siguiente código javascript en la página $(function(){$.DrLazyload();});
3-Añadir las imágenes de la página web de la siguiente manera . Donde data-size es el ancho y el alto de la imagen, y el atributo data-lazy-src es donde se especifica la ruta donde se encuentra la imagen.
ACTUALIZACIÓN: Ahora el html soporta el lazy load de imágenes con el atributo loading="lazy" de la etiqueta img