Come Ritardare il Caricamento delle Immagini con Lazy Load (jQuery)

Presentare ai tuoi utenti pagine più leggere e reattive.

scritto da Francesco Gavello [+] il 10 febbraio 2010 | 63 Commenti in: Quick news

lazy-load-wordpress-images

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à. :D

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! :)

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

63 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Ryuichi ha detto:

    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! :-)

    Rispondi
  2. [...] Come ritardare il caricamento delle immagini con Lazy Load (jQuery) Uno script utile a velocizzare il caricamento del proprio blog! [...]

    Rispondi
  3. Yuri ha detto:

    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.

    Rispondi
  4. 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!…

    Rispondi
  5. liliansi ha detto:

    Ciao Francesco, gran bel post. Era da tempo che cercavo una soluzione simile senza ricorrere a plugin. Quindi… grazie! :D

    Rispondi
  6. Ale07 ha detto:

    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?

    Rispondi
    • Francesco Gavello ha detto:

      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 :(

      Rispondi
  7. Francesco Caruccio ha detto:

    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

    Rispondi
  8. Francesco Caruccio ha detto:

    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”
    });
    });

    Rispondi
  9. Francesco Caruccio ha detto:

    Grazie Fra, ho risolto! Grandissimo Francesco. Puoi vedere il risultato qui: http://www.witchnail.net

    Rispondi
  10. Sebastiano ha detto:

    Grazie Francesco,
    questo tutorial è stato utilissimo per il mio blog!

    Rispondi
  11. Marco ha detto:

    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! ;-)

    Rispondi
  12. Stefano ha detto:

    Non so se nei commenti è già stato segnalato, ma esiste un plugin per WordPress.

    http://github.com/ayn/wp-jquery-lazy-load/

    Rispondi
    • Marco ha detto:

      Veramente viene accennato anche nell’articolo…:D

      Rispondi
      • Stefano ha detto:

        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!???

      • Francesco Gavello ha detto:

        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).

  13. Stefano ha detto:

    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 :)

    Rispondi
  14. Stefano ha detto:

    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.

    Rispondi
    • Francesco Gavello ha detto:

      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é).

      Rispondi
  15. Kolor ha detto:

    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?

    Rispondi
    • Francesco Gavello ha detto:

      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.

      Rispondi
  16. Kolor ha detto:

    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

    Rispondi
  17. Kolor ha detto:

    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. ;)

    Rispondi
  18. Matt ha detto:

    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

    Rispondi
  19. Francesco Gavello ha detto:

    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. ;)

    Rispondi
  20. Davide ha detto:

    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?

    Rispondi
    • Francesco Gavello ha detto:

      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.

      Rispondi
      • Davide ha detto:

        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?

      • Francesco Gavello ha detto:

        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.

      • Lui ha detto:

        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

      • Francesco Gavello ha detto:

        Ciao Lui, incollalo direttamente in header.php, o comunque (nel caso di una struttura particolare nel layout del tuo blog) dentro il tag HEAD. ;)

  21. Lui ha detto:

    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

    Rispondi
  22. Lui ha detto:

    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

    Rispondi
    • Francesco Gavello ha detto:

      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″

      Rispondi
  23. Lui ha detto:

    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

    Rispondi
    • Francesco Gavello ha detto:

      Occhio, a inserire più volte lo stesso javascript non fai altro che allargare i possibili problemi.

      Sono pronto a scommettere che si tratti di JS to Footer, che ti sposta le chiamate al fondo scombussolando il giusto ordine. Prova a disattivarlo per restringere il problema.

      Ad ogni modo potresti anche testare il tutto su una nuova installazione di WordPress, magari in locale, così da prendere la mano con la questione “script & plugin” (o testarne di nuovi, come spesso mi capita) in un terreno neutro.

      Rispondi
      • Lui ha detto:

        Ehm.. anche con js disattivato non funziona.
        Ho anche seguito il consiglio e ripulito i due codici: il #2 è solo in header.php e il 3# è solo in footer. Ma niente, neanche questo!

        Valuterò l’ipotesi dell’abbandono di questa – stupenda – soluzione! :-(

  24. Kolor ha detto:

    Dal lato Seo come è visto LazyLoad?

    Rispondi
  25. franco.pentangeli ha detto:

    a diversi mesi da questo articolo, ritieni questo plugin ancora utile? va implementato secondo te oppure no? quali sono le controindicazioni?
    grazie!

    Rispondi
    • Francesco Gavello ha detto:

      Ciao Franco, come vedi Lazy Load è ancora presente sul blog con tutti i benefici del caso. Soluzioni alternative non credo ne siano state sviluppate e le uniche controindicazioni sono il riuscire ad applicarlo sul proprio blog masticando un po’ di javascript di base. ;)

      Rispondi
  26. Veronica ha detto:

    Ciao a tutti,
    non so se qualcuno risponderà visto l’età della discussione.

    Per caso è cambiato qualcosa nelle ultime versioni del .js?
    Ho seguito il chiarissimo tutorial alla lettera ma il comportamento delle immagini non cambia assolutamente.

    Sul sito dell’autore ora è disponibile la versione 1.7.2 dello script, non vorrei che dipendesse da questo :-(

    Rispondi
    • Francesco Gavello ha detto:

      Ciao Veronica,
      forse hai impostato il “failure_limit” su un valore troppo alto?

      In realtà non è necessario null’altro rispetto a quanto riportavo qui sopra: il riferimento a dove puntare i tag IMG, qualche accenno al failure_limit e all’effetto da usare, e null’altro.

      Un paio di check che conviene sempre fare, banali ma non troppo: il JS dello script viene caricato correttamente? Viene caricato dopo jQuery come dovrebbe?

      Fammi sapere! ;)

      Rispondi
  27. [...] allo stretto necessario. Tutto questo è possibile grazie ad un file JavaScript, puoi quindi includerlo direttamente nel tuo tema o installando il plugin di [...]

    Rispondi
  28. Andrea ha detto:

    Molto utile questa guida, all’inizio non capivo gran ché.

    Rispondi
  29. zerouno ha detto:

    Ciao,
    mi piacerebbe inserire questo plugin nel mio sito, fatto con jquerymobile dove le immagini vengono caricate tramite script PHP. Ho provato ad aggiunderlo alla fine della pagina PHP ma niente.
    Come posso adattarlo?

    Grazie.

    Rispondi
    • Francesco Gavello ha detto:

      Qualche sviluppatore in ascolto che possa dare una mano a Zerouno? ;)

      Rispondi
      • zerouno ha detto:

        Grazie Francesco per il tuo appello :) ma credo che io voglia fare qualcosa che non esiste, ho girato per la rete ho anche chiesto allo sviluppatore di Lazy (molto disponibile) ma niente.

        Premetto che sono un newbie:
        ho creato un sito con Jquerymobile ed uso un piccolo script in php integrato in una pagina html, ma avendo molte immagini mi vangono caricate tutte insieme e non mi piace nel modo in cui vengono caricate.

        Invece di usare lo script PHP vorrei chiederti se c’è un modo con Jquery per caricare immagini da una directory e dargli l’effetto Lazy, o qualcosa del genere.

        Grazie ancora.

  30. Vincenzo ha detto:

    Salve,
    ottimo, lo vedevo usare su repubblica.it e mi piaceva molto. L’ho messo sul mio sito, ma non capisco come si cambia il colore dell’immagine segnaposto (grigio) che esce prima di caricare l’immagine giusta. Mi date una mano? http://www.cilentonotizie.it

    Rispondi
  31. Vincenzo ha detto:

    Ho risolto subito, creando un’immagine white “to data uri” qui: http://websemantics.co.uk e sostituendo il codice in jquery.lazyload.js !

    Rispondi
  32. Filippo ha detto:

    Ciao Francesco,

    complimenti per il blog e per le tante informazioni utili, seguendole un pò ho cercato di velocizzare il mio sito http://bikemtb.net ho usato WP Total Cache, notevolmente migliorato almeno dallo speed test, prima la pagina la caricava sugli 8-10 secondi, ora mi resterebbe da ottimizzare le immagini, uno lo farei con il plugin smash.it che però funziona con versioni più nuove di wordpress e i prossimi giorni lo aggiornerò, ero rimasto indietro per problemi di aggiornamento di plugins e piccoli problemi sul template, ora sembrano risolti e quindi potrò aggiornare tutto, una cosa interessante sarebbe applicare il lezy load ma essendo allo scuro quasi completamente di queste cose già alla prima riga mi sono perso o quasi :-) vediamo se qualcosa ci becco:

    1) devo creare un file vuoto (io uso coda 2 per qualche piccola modifica di css o html) e applicare il primo codice, salvarlo con il nome lazyload.js ed inserirlo nella mia cartella del template (cartella credo js)
    2) La fase due del richiamo non la so fare, dove devo inserire la stringa al punto 2?
    3) Idem per il 3, presumo che debba andare forse nel file footer.php (che finisce in fondo con

    dove lo inserisco?
    4) il “failurelimit” incide su quante foto hai? Il mio sito ha articoli anche con molte foto anche pesanti, con visualizzazioni ingrandite tramite NextGen Gallery e Fancy Box dici che sarebbe meglio alzarlo fino a quanto più o meno?

    Grazie della pazienza

    Rispondi
  33. Deals Dust ha detto:

    proverò ad utilizzare questo script nel sito in firma che attualmente nonostante sia su un vps é davvero lento!
    Grazie per la segnalazione

    Rispondi
  34. Antony ha detto:

    Lo devo assolutamente utilizzare, grazie mille

    Rispondi
  35. gennaro ha detto:

    Salve,
    come faccio a caricare jqueri sul blog wordpress?
    Tramite FTP?In quale cartella?
    A Lazy Load?
    Grazie

    Rispondi
  36. Giorgio ha detto:

    Ciao Francesco,
    complimenti per il tuo blog!
    Sto provando a implementare lazy load sul mio sito, ma non riesco in alcun modo a vedere l’effetto.
    Ho inserito nel footer il richiamo a jquery.lazyload.min.js e lo script per failurelimit impostato a 50.
    Ho controllato anche i diritti di esecuzione dello script e sono corretti.
    Grazie per quello che fai.

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!