jQuery Lazy Load: carga tus imágenes según hagan falta

Publicado el en la categoría Diseño y Programación, General

jqueryLazy-loading es una técnica que consiste básicamente en no cargar un recurso mientras no sea neceseario. Por ejemplo, en una página que muestra digamos 25 imágenes, en nuestro monitor pueden verse 5 a la vez, el resto no son visibles hasta que hacemos scroll con el ratón para tenerlas en pantalla. Sin lazy-loading, todas las imágenes son descargadas pese a no ser visibles aún, ralentizando la carga de la página en general. Usando la técnica de lazy-loading, las imágenes no visibles se irán descargando según vayamos bajando con el ratón y estas se muestren en pantalla.

Una manera relativamente sencilla de implementar esta técnica es con el plugin Lazy Load para jQuery. Para empezar a usarlo necesitamos descargarlo desde la sección de plugins de jQuery y cargarlo en nuestro HTML, además de cargar el propio jQuery.

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

Una vez cargado, tenemos que modificar los tags <img> y añadirles el parámetro data-original, que contendrá la ruta de la imagen. También deberemos darles una clase específica para controlar qué imágenes usarán lazy-load.

<img class="lazy" data-original="img/ejemplo.jpg" width="640" height="480">

$(function() {
    $("img.lazy").lazyload();
});

De esta forma, todas las imágenes que usen la clase “lazy” usarán la técnica lazy-load, y las imágenes que no usen la clase se cargarán de forma normal.

El plugin Lazy Load permite personalizar el comportamiento de esta técnica bastante a fondo, por ejemplo especificando un umbral de píxeles para empezar la descarga de la imagen, asociar la carga a eventos distintos del scroll, como click, mouseover, o eventos personalizados, usar efectos, etcétera, y todo bien detallado en su documentación.

Página oficial de Lazy Load para jQuery
Página oficial de jQuery

Facebooktwittergoogle_plus