Nel post di mercoledì abbiamo introdotto il plugin jQuery Lazy Load spiegando quali siano i due principali vantaggi offerti dalla sua implementazione in un qualsiasi sito: risparmio di banda utilizzata e velocità di caricamento delle immagini sensibilmente migliorata (lato utente). La seconda ed ultima parte di oggi riguarderà invece una serie di piccoli ma importanti accorgimenti mirati a perfezionare ulteriormente la resa del plugin e la sensazione di velocità percepita dei visitatori.
Threshold value
Per evitare che il visitatore si accorga del caricamento “al volo” delle immagini presenti sullo schermo (anche se si tratta di un’operazione di alcuni istanti), è possibile inserire nel codice un parametro threshold con l’obiettivo di completare il caricamento dell’immagine prima che questa appaia effettivamente sullo schermo:
Utilizzando il valore “200”, come mostrato nella pagina ufficiale del plugin jQuery, saranno ad esempio caricati preventivamente 200 pixel dell’immagine non ancora visualizzata sullo schermo. La fonte del tutorial consiglia di utilizzare il valore “500”.
Immagini dalle dimensioni variabili
Nel caso in cui si utilizzi il plugin su siti responsive e che quindi adoperano una dimensione delle immagini variabile a seconda del caso, è opportuno utilizzare i seguenti valori (codice CSS da applicare alle immagini interessate):
Soluzioni alternative al plugin
L’approccio “lazy loading” sta riscuotendo buon successo e ciò spiega la presenza online di numerose alternative al plugin presentato in queste due puntate. La fonte del tutorial ne cita due: jQuery Unveil e Blazy. La prima è una versione più leggera di Lazy Load che offre esclusivamente funzionalità base. La seconda è consigliata per tutti i siti che non utilizzano la libreria jQuery ma esclusivamente JavaScript.
Per qualsiasi informazione aggiuntiva vi rimandiamo alla pagina ufficiale del plugin jQuery. Alla prossima guida!
