jQuery: velocizzare il caricamento della pagina con Lazy Load

Una delle caratteristiche importanti di un sito web è la velocità con cui esso viene caricato. Può capitare spesso che una pagina contenente molte immagini impieghi diverso tempo per essere caricata e, spesso, gli utenti non intendono attendere oltre e chiudono la pagina (me compreso).

Una soluzione consiste nel utilizzare la tecnica del lazy loading, molto famosa nella programmazione. Tale tecnica consiste nel caricare un oggetto solo nel momento dell’effettivo bisogno. Volendo portare tale tecnica al caso specifico, consisterebbe nel caricare le immagini solo nel momento in cui se ne necessita velocizzando il caricamento di tutta la pagina.

Un metodo molto semplice per realizzare ciò consiste nell’utilizzare un plugin per jQuery chiamato Lazy Load. Tale plugin appunto consente di caricare le immagini solo quando viene visualizzata la parte di pagina in cui essa è posizionata.

Il funzionamento è semplicissimo e, con una sola riga di codice, il plugin è già funzionante. Vediamo nel dettaglio però come funziona e le personalizzazioni del plugin.

Caricare le immagini con Lazy Load

Il funzionamento base richiede la sola seguente riga di codice che richiama il metodo lazyload().

view sourceprint?

1 $("img").lazyload();

Così il codice è del tutto funzionante e siamo già operativi. Vediamo però come possiamo personalizzarlo in base alle nostre esigenze.

Caricare le immagini quando ci avviciniamo alla loro posizione

Con il codice visto in precedenza si ha il problema però che se l’immagine è troppo grande, l’utente dovrà attendere comunque che essa venga caricata anche una volta che ha raggiunto la sua posizione. Da un lato si ha il vantaggio di evitare inutili richieste (seppur asincrone) HTTP ma dall’altra c’è comunque del tempo da attendere. La soluzione consiste nel far caricare le immagini quando si è vicini di un determinato numero di pixel all’immagine. Tale soglia, rappresentata dal parametro threshold, può essere impostata come nel seguente codice:

view sourceprint?

1 $("img").lazyload({ threshold : 200 });

Il valore di 50 indica il numero di pixel.

Scegliere l’immagine alternativa visualizzata prima del caricamento

Di default il plugin visualizza un’immagine di sfondo grigio mentre si attende il caricamento dell’immagine originale. Il plugin presenta però due alternative: un’immagine di colore bianco e una trasparente. Se vogliamo scegliere una delle due oppure una a nostra scelta si può usare il parametro placeholder come nel seguente esempio:

view sourceprint?

1 $("img").lazyload({ placeholder : "img/grey.gif" });

Utilizzare un effetto per visualizzare l’immagine

Si possono assegnare al plugin anche degli effetti carini per rendere meno “dura” l’entrata dell’immagine. Gli effetti utilizzabili sono tutti quelli presenti nativamente in jQuery. Il codice necessario per assegnare, ad esempio, un effetto fade è il seguente:

view sourceprint?

1 $("img").lazyload({ effect : "fadeIn" });

Cambiare l’evento che attiva il caricamento

In determinate circostanze si ha l’esigenza di modificare l’evento che avvia il caricamento dell’immagine. Di default tale evento corrisponde al mouseover ma è possibile modificarlo in base ai nostri bisogni. Per attivarlo al’evento click, per esempio, abbiamo bisogno del seguente codice:

view sourceprint?

1 $("img").lazyload({ event : "click" });