Le immagini sono tra i contenuti più utilizzati online e possono influire negativamente sulla velocità di caricamento di un sito. Riallacciandoci a quanto detto in due recenti mini guide sull’abbassamento della frequenza di rimbalzo e sulla velocizzazione dei caricamenti in un blog WordPress, vedremo nel post di oggi come gestire intelligentemente il caricamento delle immagini, in modo da non impegnare inutilmente banda e soprattutto non fare attendere gli utenti.
Utilizzo del plugin jQuery
Il portale SitePoint, fonte originaria del tutorial, ha scelto di utilizzare il plugin jQuery Lazy Load plugin (che richiede naturalmente la libreria JavaScript jQuery) per implementare il caricamento ottimizzato delle immagini (lazy, che in inglese significa “pigro”, indica indirettamente il caricamento non istantaneo dei file).
E’ possibile sfruttare il plugin in questione in due modi: attraverso il caricamento da CDN o intervenendo direttamente sul codice html del sito come indicato nel link fornito.
Indipendentemente dall’approccio scelto, dovremo procedere per tutte le immagini all’inserimento degli attributi altezza (height), larghezza (width), della classe .lazy e dell’attributo src data-original in modo da avere:
<img class=”lazy” data-original=”image.jpg” width=”640″ height=”480″>
Inseriamo successivamente nel codice JavaScript la seguente linea:
$(“img.lazy”).lazyload();
Il risultato finale dovrebbe essere simile a quanto mostrato dal seguente demo: effettuate lo scroll della pagina per notare come le immagini siano caricate esclusivamente quando appaiono effettivamente sullo schermo.
Nella prossima puntata vedremo come perfezionare il sistema di caricamento in modo da dare al visitatore l’impressione che il tutto avvenga in modo istantaneo e fluido.