Quizás algo de lo que más pesa a la hora de cargar una página HTML es el conjunto de imágenes que la página necesita para visualizarse correctamente. En muchas ocasiones existe la necesidad de realizar la carga de forma vaga (lazy load). Esta carga se realizará según el usuario necesite las imágenes. Uno de los plugins más habituales para realizar esta operación es jQuery LazyLoad.
Configuración
El plugin se puede instalar a traves de npm, bower, o se puede descargar a través del site de jQuery plugins. Hacer uso de este plugin es sencillo ya que basta con cargarlo y definir un selector de clase que afectará al conjunto de imágenes que se van a cargar de forma vaga.
<html>
<head>
</head>
<body>
</body>
</html>
Según el scroll de la página vaya avanzando las diferentes imágenes se cargarán.
El plugin soporta varios parámetros de configuración interesantes:
-
threshold (px) : Carga los primeros pixels de cada imagen antes de que se muestre en el viewport.
-
event: Carga las imágenes como respuesta a un evento asociado, como por ejemplo click.
El plugin permite también una integración sencilla con AJAX.
