Compartir
Publicidad

jQuery Lazy Load Plugin

jQuery Lazy Load Plugin
0 Comentarios
Publicidad
Publicidad

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>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $("img.lazy").lazyload({

        effect : "fadeIn",
   });
}); 

</script>
</head>
<body>

<img class="sf-lazy lazy" src="javascript:void(0)" data-sf-srcset="imagencarga.jpg 450w, imagencarga.jpg 681w, imagencarga.jpg 1024w, imagencarga.jpg 1366w" data-sf-src="imagencarga.jpg" alt=""><noscript><img alt="" src="imagencarga.jpg"></noscript>

<img class="sf-lazy lazy" src="javascript:void(0)" data-sf-srcset="imagencarga.jpg 450w, imagencarga.jpg 681w, imagencarga.jpg 1024w, imagencarga.jpg 1366w" data-sf-src="imagencarga.jpg" alt=""><noscript><img alt="" src="imagencarga.jpg"></noscript>

<img class="sf-lazy lazy" src="javascript:void(0)" data-sf-srcset="imagencarga.jpg 450w, imagencarga.jpg 681w, imagencarga.jpg 1024w, imagencarga.jpg 1366w" data-sf-src="imagencarga.jpg" alt=""><noscript><img alt="" src="imagencarga.jpg"></noscript>

</body>
</html>

Según el scroll de la página vaya avanzando las diferentes imágenes se cargarán.

Jquery

El plugin soporta varios parámetros de configuración interesantes:

  1. threshold (px) : Carga los primeros pixels de cada imagen antes de que se muestre en el viewport.
  2. 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.

Temas
Publicidad
Comentarios cerrados
Publicidad
Publicidad
Inicio