jQuery: Auto lazy load imágenes

Uno de los mayores problemas actuales de posicionamiento es la velocidad. ¿Causante? A veces culpa de las imágenes, a veces no. Aún así nunca está demás retrasar su carga para mejorar la velocidad y dar una mayor experiencia a tus visitantes. En esta ocasión vamos a ver como fácilmente podemos retrasar la carga de imágenes para que lo hagan una vez esté cargada completamente la página. Con jQuery Lazy, hecho con jQuery, obviamente, podemos hacer que nuestra página web cargue mucho más rápido.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
	<script type="text/javascript">
	$(function(){
        $('.lazy').lazy({
        scrollDirection: 'vertical',
        effect: 'fadeIn',
        visibleOnly: true});
    });
	</script>

Lo que hace este código(puedes descargar un ejemplo al final del post), es mostrarte como con unas pocas líneas de código puedes retrasar la carga. Por supuesto, hace falta insertar la librería de jQuery y la de jQuery Lazy para que funcione.

Muy importante: todas las imágenes deben tener la clase CSS .lazy y la url de la imagen en el atributo data-src. Como en este ejemplo:

<img class="lazy" data-src="images/0.jpg" />

Aquí tienes un sencillo ejemplo para que puedas probarlo en tu servidor:

Descargar archivo -> Ejemplo retrasar imágenes usando jQuery Lazy (20 descargas)

Nota: comprueba las versiones tanto de jQuery como de jQuery Lazy, pueden haber cambiado des del momento que se creó el artículo.

Puedes encontrar la versión de jQuery más actualizada, en las librerías hospedadas de Google. También puedes encontrar más ejemplos de jQuery Lazy en su página oficial tanto como los cdn actualizados. Aségurate de no copiar el cdn plugin, de lo contrario no te servirá(a un servidor le pasó la primera vez).

CDN jQuery Lazy
CDN jQuery Lazy
No votes yet.
Please wait...

Deja un comentario

marchurtos
A %d blogueros les gusta esto: