LazyLoad è una libreria jQuery creata da Mika Tuupola, che permette di caricare le immagini in modo asincrono (ovvero con metodo Ajax) rispetto al caricamento della pagina. Questo permette ad un visitatore di caricare in modo rapido la pagina, e scaricare le immagini man mano che compaiono nell’area visibile dello schermo. Ovviamente tutto ciò ha un senso quando la nostra pagina ha molte immagini, ad esempio nella nostra sezione relativo all’escursionismo succede proprio questo. Alla fine di ogni scheda dell’escursione ci sono parecchie foto, alcune anche all’interno di un contenitore “toggle”, si veda questa pagina.
Dal punto di vista tecnico sarebbe addirittura possibile caricare tutte le immagini del sito in questo modo, ma ovviamente quelle che compongono la grafica, così come alcune singole foto dell’articolo, ad esempio l’immagine in evidenza, sarebbero interessate comunque durante il caricamento stesso della pagina, quindi non avrebbe senso logico. Ergo è importante comprendere che oltre ad avere un certo numero di immagini da mostrare, queste devono essere fuori dal campo visivo dello schermo. Solo così otterremo pieno vantaggio da questa libreria, fornendo all’utente una esperienza del nostro sito più rapida, benché più onerosa poiché rispetto ad un sistema tradizionale il numero di byte scaricati sarà leggermente superiore.
Non ultimo ma decisamente importante, questa libreria è già predisposta per la visualizzazione mobile, quindi sarà efficace anche su tablet e smartphone.
Passiamo ora a vedere come funziona in modo generico, e successivamente come ho fatto per caricarla nelle gallerie di Jetpack (tiled gallery), che sono gestite esternamente al sito di WordPress.
Da GitHub potremo scaricare direttamente l’ultima versione di LazyLoad. Per caricarla in una pagina sarà necessario prima caricare jQuery, quindi LazyLoad e successivamente fornire le direttive su come utilizzarla, tutto può essere messo nelle sezioni HEAD o nel cosiddetto footer dell’html.
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload();
});
</script>Questo sopra è un esempio basico, l’immagine per essere caricata in modo asincrono dovrà utilizzare la classe css lazy per essere intercettata.
<img class="lazy " data-original="img/unafoto.jpg" width="800" height="600">
L’attributo data-original invece servirà a caricare l’immagine al posto del classico src, questo è necessario perché altrimenti le immagini sarebbero comunque caricate dal browser durante l’accesso alla pagina. Si tratta, come si può intuire, di dover modificare in modo specifico il codice nelle sezioni in cui esso dovrà essere utilizzato.
LazyLoad permette inoltre una serie di opzioni interessanti. Con la dichiarazione threshold (da qui in poi ometterò negli esempi la dichiarazione di script iniziale):
$("img.lazy").lazyload({
threshold : 200
});
andremo ad istruire la libreria affinché inizi il caricamento delle immagini 200 pixel prima che queste entrino nell’area visibile dello schermo.
Con l’istruzione effect invece possiamo impostare il modo in cui appaino le immagini nello schermo al termine del caricamento, questo per dare un effetto grafico più carino.
$("img.lazy").lazyload({
effect : "fadeIn"
});
Gli effetti disponibili sono mutuati direttamente da jQuery, ad esempio fadeIn, slideUp, slideDown, animate eccetera, qui una lista esaustiva. Per default si utilizza show, che di fatto non ha animazioni.
Potremo persino attuare lo scaricamento delle immagini ad un preciso comando o azione dell’utente finale:
$("img.lazy").lazyload({
event : "mouseover"
});
Nel caso specifico quando l’utente posizionerà il mouse sopra l’immagine questa comincerà lo scaricamento. Altre opzioni rispetto a mouseover sono click, sporty e foobar. Con click si spiega abbastanza da solo, ovvero quando l’utente clicca sull’area dell’immagine. Qui ovviamente si apre un problema, se l’immagine non è caricata ovviamente non è visibile, quindi l’utente non avrà modo di sapere che in quel specifico punto ci sia una azione da compiere. In questo caso potremo indicare una immagine, chiamiamola di default, che sarà visibile fino alla richiesta dell’azione.
$("img.lazy").lazyload({
event : "click",
placeholder : "/images/default.gif"
});
come si può apprezzare la direttiva “placeholder” indicherà allo script dove reperire l’immagine di default. Questa funzione può rivelarsi molto utile anche con la funzione base nel caso l’immagine vera e propria per qualche motivo non sia reperibile.
Sporty o foobar invece caricherà le immagini solo dopo un certo numero di secondi (che vanno definiti) dopo il caricamento della pagina. Questo richiede un pezzo di codice in più:
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});
In particolare l’ultima riga definisce il caricamento delle immagini 5 secondi dopo aver terminato il caricamento di tutta la pagina.
Nel sito ufficiale ci sono altri esempi che potrebbero interessarvi.
Passiamo ora a WordPress. Potenzialmente si può caricare tutto con un plugin, ve ne sono una decina elencati in wordpress.org. Tuttavia sarebbe piuttosto semplice integrare la cosa all’interno del tema grafico. Non mi è possibile fare un esempio pratico perché ogni tema ha il suo sistema, in linea di massima intercettate dove vengono caricate le altre librerie javaScript, aggiungete quella relativa a LazyLoad e poi mettete, ad esempio nel footer, le impostazioni.
Nel mio caso invece avevo un problema in più. Utilizzo per le gallerie fotografiche la funzionalità di tiled Gallery offerta dal plugin JetPack. Questo plugin di fatto crea una bella mosaicatura delle foto, ma queste sono originate direttamente dai server di WordPress.com, quindi di fatto l’immagine non è nemmeno veicolata dal sito. Fortunatamente gli sviluppatori di JetPack hanno pensato a rilasciare un plugin, sebbene in beta, disponibile qui su GitHub oppure su WordPress.org. Una volta installata ho dovuto modificare il file lazy-load.php commentando le seguenti righe:
if ( 'square' !== $attrs['type'] ) {
return $val;
}
che servivano ad attivare la modalità LazyLoad solo sulle gallerie di tipo quadrato e non sulle altre.
In conclusione LazyLoad è un ottimo sistema intelligente dell’utilizzo di Ajax che permetterà anche in presenza di molte foto, di caricare velocemente l’intera pagina, posticipando il caricamento delle immagini quando e se verranno viste. Ovvero la soluzione ottimale per non far fuggire gli utenti con caricamenti lunghissimi quanto dannosi.