Come Ritardare il Caricamento delle Immagini con Lazy Load (jQuery)
Presentare ai tuoi utenti pagine più leggere e reattive.
Probabilmente avrai già notato come da qualche giorno le immagini di questo blog si carichino solo quando strettamente necessario.
Nell’ottica di dare un altro giro di vite alla velocità di caricamento delle mie pagine, ho ripreso in mano un vecchio consiglio datomi dal buon Jacopo Nardiello ai tempi dello IAB 2009: usare Lazy Load.
Lazy Load, ispirato da YUI ImageLoader di Matt Mlinac -anche disponibile in versione plugin per WordPress ma che francamente sconsiglio- è un semplicissimo script in javascript che evita al tuo browser di caricare tutte le immagini che stanno al di là dello scrolling del browser (eccone una demo).
I vantaggi? Le pagine si caricano più in fretta e gli utenti possono navigare senza contenuti caricati in background e dei quali magari non faranno uso.
Ecco come si fa! 
1. jQuery
Prima di tutto assicurati di caricare jQuery sul tuo blog. Se già utilizzi tab a scomparsa o un qualche altro tipo di effetto in ajax è probabile che il tuo tema già preveda l’importazione di jQuery. In questo caso puoi tranquillamente saltare questo passo.
Altrimenti, il miglior modo che conosco è quello di affidarmi alle Google’s Ajax Library API, richiamando direttamente jQuery nella versione che preferisco.
Verrà così caricato il file js (in versione “minified”) con un notevole guadagno di praticità.
Questo il solo codice necessario:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
2. Lazyload.js
Poi, una volta caricato nella cartella del nostro tema il file javascript di cui Lazy Load si compone, non resterà che richiamarlo come di consueto:
<script src="URL/VERSO/jquery.lazyload.js" type="text/javascript"></script>
3. Un pizzico di magia
A questo punto, non dovrai fare altro che inserire, preferibilmente nel footer del tuo blog, il seguente snippet:
<script type="text/javascript">
jQuery(document).ready(function(){
$("img").lazyload({
failurelimit : 50,
effect : "fadeIn"
});
});
</script>
che andrà a puntare tutte le immagini (tag “img”) applicandovi la magia della funzione “lazyload”.
Tutto qui?
Eh già. 
Nota la variabile “failurelimit” su 50 (o un valore ugualmente elevato). In layout non esattamente “lineari”, come spesso lo sono quelli di blog e siti web complessi è necessario infatti alzare di poco la tolleranza standard per permettere che proprio tutte le immagini vengano prese in considerazione.
Giusto per gradire, lo script presenta un discreto numero di opzioni. Si va dalla sensibilità, alla gestione di trigger per la visualizzazione, placeholder ed effetti grafici.
Niente di più semplice! 
scritto da
Francesco Gavello
il 10 febbraio 2010
| 41 commenti
in: Sideblog
Continua a leggere
Share The Love!
Aiuta FrancescoGavello.it a crescere e ad avere sempre più articoli di qualità!
Scarica il mio eBook!
Lanciare, promuovere e mantenere un blog che funziona. Mica male!
Ti presento un eBook di 80+ pagine piene di risorse, idee, consigli e tool per costruire un grande il tuo grande blog partendo dalle fondamenta!
Scegli di ricevere gli articoli via feed RSS e potrai scaricare subito l'eBook direttamente dal tuo feedreader al fondo di ciascun articolo. Puoi anche seguirmi tramite email, se lo ritieni più comodo, per ricevere gli ultimi articoli direttamente nella tua casella di posta.
La tua email sarà mantenuta confidenziale e non divulgata a terzi per alcun motivo.
Sideblog
Link dalla blogosfera.
Intervistato da Splesh! insieme a Giuliano Ambrosio
Solo una veloce segnalazione. Stefano di Splesh! DigitalArt sta portando avanti da qualche tempo una serie di interviste rivolte ad alcuni elementi della blogosfera italiana legati al web design e alla...
Cache, Velocità e Motori di Ricerca
Non passa giorno senza un nuovo annuncio, o rumor, dedicato alla decisione di Google di cominciare a considerare la reattività di un sito web come effettivo parametro di valutazione per...
Automattic annuncia VaultPress (beta)
Il team dietro a WordPress, Automattic, ha annunciato lo sviluppo di VaultPress, un servizio di backup a 360° per blindare i contenuti del tuo blog o sito web. Attualmente il progetto...
Journalistics ci Insegna a Battere il Blocco dello Scrittore
Jeremy Porter per Journalistics ha stilato un ottimo articolo che cerca di fare il punto della situazione sul tanto temuto blocco dello scrittore. Stai fissano il monitor da una ventina di...
Grazie Francesco, sei un grande!
Ieri avevo scritto una mail a Francesco chiedendogli come è riuscito ad ottenere il caricamento delle immagini “solo quando serve” ed è stato così gentile da scrivere un vero e proprio tutorial.
Ho già provveduto ad attivarlo per i miei siti, grazie ancora!
Felice di esserti stato utile
È davvero uno script interessante: l’autore nel corso dei mesi ha provveduto ad alleggerirlo sempre di più e non richiede nessuna grande skill tecnica per essere attivato.
[...] Come ritardare il caricamento delle immagini con Lazy Load (jQuery) Uno script utile a velocizzare il caricamento del proprio blog! [...]
Bravo Francesco, semplice ed efficace tutorial,
lo conoscevo già però non l’ho mai messo perché sono 2 script in più caricati (3 con l’inline script ed uno fa anche una ricerca DNS in più), sarebbe interessante vedere la differenza del tempo di caricamento totale e YSlow/PageSpeed punteggio per chi ha un template con molte immagini come me…testare o sprite
Ciao,
Yuri.
Social comments and analytics for this post…
This post was mentioned on Twitter by nanodastaff: Come ritardare il caricamento delle immagini con lazy load di jquery http://tinyurl.com/yh7po87 – Grazie Francesco!…
Ciao Francesco, gran bel post. Era da tempo che cercavo una soluzione simile senza ricorrere a plugin. Quindi… grazie!
Script ottimo ma se le immagini fossero contenute in diversi accordion e volessi che le immagini compaiano man mano che vengono aperti e senza usare la funzione scroll? Sarebbe possibile una cosa del genere? O altrimenti che Script mi consilgli?
Credo che in tal caso dovresti mettere mano al JS del progetto in questione senza disporre di script “pronto uso”.
Quasi sicuramente è possibile fare ciò che desideri, ma non essendo io un programmatore non saprei purtroppo dove indirizzarti
Wow, grandioso! Quindi Fra, se non ho capito male in teoria si può applicare a qualsiasi cms che fa uso di Jquery, non solo a wordpress.
Segnalo questo: http://davidwalsh.name/mootools-lazyload
Praticamente è lo stesso effetto, ma basato su mootools. Quindi consigliato per blog e siti basati su Joomla invece che wordpress
Fra, avrei una domanda. Sto sbagliando qualcosa per http://www.witchnail.net
Ho inserito i due codici copia-incollati da questo esempio che hai proposto, ma non succede niente.
Questo nell’head:
google.load(”jquery”, “1.3.2″);
E questo nel footer:
jQuery(document).ready(function(){
$(”img”).lazyload({
failurelimit : 50,
effect : “fadeIn”
});
});
Hai scaricato e richiamato LazyLoad.js nel footer come nel punto #2?
No, da dove lo scarichi tu? Ho inserito il codice nel footer, ma pensavo prendesse il js online
Devi scaricare lo script -che è una cosa separata rispetto a JQuery- dal sito ufficiale indicato in apertura (http://www.appelsiini.net/projects/lazyload).
Poi devi caricare il file .js sul tuo spazio web in una directory dal nome “js” (ad esempio) nella cartella del tuo tema e richiamarlo con lo script al punto 2, adeguatamente corretto per farlo puntare al percorso giusto.
Grazie Fra, ho risolto! Grandissimo Francesco. Puoi vedere il risultato qui: http://www.witchnail.net
Grazie Francesco,
questo tutorial è stato utilissimo per il mio blog!
Ciao Francesco, ho scoperto il tuo blog quasi per caso ed ora devo dire che lo sto seguendo con regolarità. Complimenti innanzitutto per tutti gli utilissimi contenuti che condividi.
Ho una semplice domanda: per quale motivo sconsigli la versione plugin per WP di questo script? Sinceramente la sto utilizzando da un po di tempo e mi trovo abbastanza bene, o meglio, non ho rilevato problemi o incompatibilità. Si presta molto bene anche con nexgen gallery..
Buona giornata!
Non so se nei commenti è già stato segnalato, ma esiste un plugin per Wordpress.
http://github.com/ayn/wp-jquery-lazy-load/
Veramente viene accennato anche nell’articolo…:D
Hai ragione XD avevo letto l’articolo qualche tempo prima e non lo ricordavo!
@Francesco
Io sto riscontrando un problemino con questo script…in locale mi funziona, portato su server non va…sono certo che i percorsi e il codice siano ok, eppure una volta portato su server non ne vuole sentire!
Inoltre per tagliare la testa al toro, ho provato anche il plugin per WP…stesso risultato! Questo mi ha iniziato a far pensare che il problema potrebbe essere il server O.o’ ma come potrebbe essere un problema di server con un javascript!???
La copia locale e quella online sono speculari in tutto e per tutto?
Se sei sicuro che i percorsi siano corretti, il problema potrebbe derivare da un qualche altro script prima o dopo la chiamata che influisce in qualche modo con le funzioni utilizzate (o con altri plugin che richiamano jQuery stesso).
Con il plugin inscatolato poi è ancora più difficile capire esattamente il problema perché immagino che agganci la chiamata al js direttamente a wp_head (con tanti saluti a chi carica prima o dopo).
Si sicurissimo, il problema credo sia come dici tu relativo ad altri javascript, anche perché come ti dicevo ho lo stesso problema sia con l’inserimento a manina del file javascript, sia tramite il plugin. Stesso risultato.
Se dovessi scoprire qualcosa di interessante tornerò a parlarne
Ciao Francesco, ho risolto il problema che era nell’impostazione dei permessi sul file js. Non erano settati come eseguibili e quindi ovviamente non poteva essere eseguito.
Ad ogni modo ti confermo (anche se si sapeva) che il JS applicato al tema funziona in maniera molto più performante del plugin che anzi, risulta essere quasi difettoso…non caricava le immagini sulla sidebar se non dopo aver caricato tutte le altre.
Ottimo Stefano!
Probabilmente ciò che il plugin non considera è il parametro extra “failurelimit”, che indica allo script “quanto cercare” oltre il caricamento dell’ultima immagine visibile.
Nel caso di layout non lineari, come appunto una sidebar che arrivi dopo molte righe di codice HTML, tale valore dev’essere alzato di qualche decina di punti (io l’ho settato su 50, ma ogni caso fa storia a sé).
Ciao! Il plugin mi piace molto. Lo vorrei usare su wordpress ma non sò come passare al plugin tutte le immagini contenute nella pagina tranne quelle con uno specifico “div class”, questo perchè se una pagina ha tanti commenti non mi vengono caricate le immagini nella sidebar. Aumentando il valore di failurelimit risolvo il problema ma ho un grande rallentamento nello scroll. Con:
jQuery(”div#esempio img”).lazyload riesco a passare al plugin solo le immagini che hanno div id=esempio, mentre con
“div.esempio img” solo quelle con div class=esempio
E’ possibile invece escludere un tipo di immagini contenute in un particolare div class?
Dovresti ragionare in senso opposto, facendo puntare allo script solo le immagini del contenitore principale con qualcosa del tipo:
–
$(”#divcontenutoprincipale img”).lazyload {
–
Funziona naturalmente anche con le classi.
Ciao, grazie per la risposta.
Volendo passare allo script piu di una classe come si fa’? E’ possibile?
Perche nel tema che uso ho notato che le immagini contenute nel post e quelle nella sidebar hanno classi differenti
Usa una forma del tipo
–
$(” #divcontenutoprincipale img, #idDiv1, .classe2 ”).lazyload {
–
e via discorrendo, separando con una virgola i riferimenti della chiamata a lazyload
Grazie mille! Ho risolto come mi hai consigliato e adesso vengono caricate bene tutte le immagini fin da subito. Se può essere utile a qualcuno ho usato questi parametri:
$(”div.clear img, div#sidebar_posts img, div.related_post img, div.textwidget img”).lazyload({
Dove clear è il div class del contenuto dell’articolo, sidebar_posts è il div id che contiene gli articoli in evidenza nella sidebar, gli altri 2 sono i div class degli articoli correlati e dei widget nella sidebar. Ho lasciato un failurelimit basso.
Grazie ancora per l’aiuto.
Ottimo!
Felice di esserti stato d’aiuto
ciao! hai idea dicome implementare lazy load sulla piattaforma TUMBLR? ho un blog molto ricco di immagini e mi sarebbe utilissimo, il problema è che tumblr non ti concede spazio web quindi non posso caricare il file lazyload.js in qualche cartella, al mssimo lo posso richiamare dal sito dove è ospitato il file sorgente, ma non sembra funzionare…
se hai qualche idea ti sono grato!
MAtt
Ciao Matt,
ho appena verificato sul mio Speed (http://speed.francescogavello.it) e funziona correttamente.
Assicurati di aver importato prima di tutto jQuery (magari tramite le Google API: http://code.google.com/intl/it/apis/ajaxlibs/documentation/index.html#jquery) e successivamente il JS di lazyload ospitato su un server esterno.
Poi richiama i tag “img” con il codice al punto 3 del post qui sopra e tutto dovrebbe funzionare.
il primo codice vuole nel file header.php, il terzo nel footer e il secondo?
ho caricato jquery.lazyload.mini.js qui “/themes/nometema/jquery.lazyload.mini.js” o sbaglio?
Ciao Davide, puoi tranquillamente inserire tutti gli snippet di codice direttamente nel footer.
Allo stesso modo, puoi caricare jquery.lazyload.mini.js dove meglio preferisci (per poi richiamarlo come al punto n.2). Io per praticità uso una cartella “js” dentro il tema attivo, ma la scelta sta a te.
Nota che probabilmente il tuo tema già richiama jQuery in header.php. Poco male, puoi lasciarlo al suo posto inserendo solo quanto necessario come ai punti 2 e 3.
niente, ho provato ad inserire gli ultimi due snippet nel footer e il primo nel file header.php ma non va! cosa sbaglio?
1. snippet >> prima di “” in header.php
2. snippet >> footer.php
3. snippet >> footer.php
jquery.lazyload.mini.js caricato in >> /themes/___/jquery.lazyload.mini.js
dove sta il problema?
Ciao Francesco,
Preciso e chiaro come sempre! E soprattutto, decisamente prezioso.
Ho cercato di seguire i tuoi consigli e temo di appartenere alla categoria “dubbiosi”, più che altro per alcuni passaggi.
1. “Altrimenti, il miglior modo che conosco è quello di affidarmi alle Google’s Ajax Library API, richiamando direttamente jQuery nella versione che preferisco.”
Ok. dove lo chiamo? Dove inserisco il codice che hai indicato? in header.php?
2. “Poi, una volta caricato nella cartella del nostro tema il file javascript di cui Lazy Load si compone, non resterà che richiamarlo come di consueto:”
Ehm… idem. Dove?
3. Questa l’ho capita ed era facile!
Scusami, ma è la prima volta che lavoro direttamente con JS.
Grazie,
Luca
Ciao Francesco e grazie dell’attenzione che stai offrendomi!
Ho fatto tutto:
1. Inserito il file nella cartella js del template
2. Inserito la chiamata del punto 2 in header.php, dove era già presente una chiamata js:
wp_head();
puntodidomandamaggiore
script type=”text/javascript”>
?php @include ‘js/header.js.php’; ?>
/script>
script src=”www.url.it/js/jquery.lazyload.js” type=”text/javascript”>
/head>
Ho tolto i minori per visualizzare il codice
3. Inserito nel footer l’altra chiamata:
jQuery(document).ready(function(){
$(”img”).lazyload({
failurelimit : 200,
effect : “fadeIn”
});
});
Risultato? Nada!!!
Ti viene qualche idea?
Luca
Hai controllato che jQuery venga richiamato -prima- di caricare lazyload?
Se l’hai installato su Convivendo, vedo che jQuery viene richiamato nel footer, e dove hai inserito il richiamo a LazyLoad jQuery non è ancora presente.
In questo caso devi piazzare tutto (richiamo al js e tag script di lazyload dei punti #2 e #3) dopo il blocco di richiami a jQuery; quello che inizia con “http://www.convivendo.net/wp-includes/js/jquery/jquery.js?ver=1.4.2″
Devo riconsocere un totale e assoluto imbarazzo di fronte all’ineluttabilità degli eventi!!!
Ora gli snippets #2 e #3 sono sia nell’header che nel footer, ma l’effetto… non c’è.
Non credo possa essere un problema del passaggio n. 1: visto che c’erano anche altri jquery, suppongo che il sito supporti jquery, giusto?
Può essere un problema del plugin JavaScript to Footer? o di Wp-supercache (che ho disattivato)?
Grazie davvero!
Luca
Hai modificato il path dello snippet #2 affinché punti correttamente al file sul tuo server?
Altrimenti, con molta probabilità sul tuo tema è attiva qualche altra chiamata a jQuery (forse un altro riferimento a jQuery stesso) che impediscono allo script di lavorare correttamente.
E’ quello il problema: non ho capito dove inserire la chiamata allo snippet#2.
Ovvero: dove incollo il codice che hai sgenalato al punto 1 e al punto 2?
Luca
Ciao Lui, incollalo direttamente in header.php, o comunque (nel caso di una struttura particolare nel layout del tuo blog) dentro il tag HEAD.