Lazyload JS (chiamato anche vanilla-lazyload) è uno script che permette il caricamento delle immagini allo scroll della pagina (effetto detto appunto “lazy load”). Perché lo facciamo? Innanzitutto per velocizzare il caricamento della pagine e poi per fornire una migliore User Experience: soltanto le immagini che effettivamente sono visibili nel viewport saranno richieste al server e mostrate all’utente.

Sembra banale ma.. perché richiedere risorse al server che non verranno mai usate? Questo porta anche ad un secondo vantaggio: risparmiare risorse e banda consumata. Se usiamo un servizio CDN risparmieremo decisamente molte richieste.

Lazyload è uno script di soli 3Kb che non ha dipendenze, cioè può essere usato senza includere jQuery o altre librerie. È scritto in javascript “liscio” (detto vanilla) e ha un moltissime di opzioni di configurazione che vedremo in questo articolo.

Includiamo lo script

Innanzitutto includiamo lo script nelle nostre pagine. Il consiglio è quello di farlo attraverso un CDN, in modo da non caricare nessun file sul nostro server e sfruttare l’ottimizzazione di Cloudflare:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.2.1/lazyload.min.js"></script>

A questo punto ci sono vari modi per sfruttare le sue potenzialità. Tutto dipende da come sono posizionate le immagini nel nostro codice e che obiettivo vogliamo raggiungere. Vediamo tre esempi pratici:

Caso 1: immagini in-line

Usiamo questo semplice esempio per il caso più diffuso, cioè un immagine da caricare una volta che è “nello schermo”:

HTML

<img alt="..." 
     data-original="../img/mare.jpg"
     width="400" height="300">

Javascript

var myLazyLoad = new LazyLoad();

Caso 2: immagini responsive con srcset

In questo caso usiamo la tecnica delle misure srcset , sostituendolo con l’attributo data-original-set :

HTML

<img data-original="/img/mare.jpg"
    data-original-set="/img/mare.jpg 200w, /img/mare@2x.jpg 400w"
    sizes="(min-width: 20em) 35vw, 100vw">

Javascript

var myLazyLoad = new LazyLoad();

Caso 3: con il tag <picture>

Se usiamo il tag <picture> per le immagini responsive, possiamo usare un codice analogo a questo:

HTML

<picture>
    <source media="(min-width: 1024px)" data-original-set="/img/mare1.jpg" />
    <source media="(min-width: 500px)" data-original-set="/img/mare2.jpg" />
    <img data-original="/img/mare.jpg">
</picture>

Javascript

var myLazyLoad = new LazyLoad();

Caso 4: immagini di sfondo CSS

Se volessimo applicare l’effetto lazyload a immagini posizionate come background-image  in CSS, possiamo farlo in questo modo:

HTML

<div class="lazy" data-original="../img/mare-sfondo.jpg"></div>

Javascript

var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy"
});

Ulteriori vantaggi

È SEO-friendly perché non nasconde le immagini ai motori di ricerca.

Funziona anche in presenza di altri script, come jQuery, Angular, React o Vue.

È molto più veloce del famoso jQuery lazyload: si stima infatti che sia circa 6 volte più veloce.