63 risposte

  1. Ryuichi
    10 febbraio 2010

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

    • Francesco Gavello
      11 febbraio 2010

      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.

  2. Yuri
    13 febbraio 2010

    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.

  3. liliansi
    18 febbraio 2010

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

  4. Ale07
    21 febbraio 2010

    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?

    • Francesco Gavello
      22 febbraio 2010

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

  5. Francesco Caruccio
    15 marzo 2010

    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

  6. Francesco Caruccio
    15 marzo 2010

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

    • Francesco Gavello
      15 marzo 2010

      Hai scaricato e richiamato LazyLoad.js nel footer come nel punto #2?

      • Francesco Caruccio
        15 marzo 2010

        No, da dove lo scarichi tu? Ho inserito il codice nel footer, ma pensavo prendesse il js online

      • Francesco Gavello
        15 marzo 2010

        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.

  7. Francesco Caruccio
    17 marzo 2010

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

  8. Sebastiano
    20 marzo 2010

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

  9. Marco
    27 marzo 2010

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

  10. Stefano
    29 marzo 2010

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

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

    • Marco
      29 marzo 2010

      Veramente viene accennato anche nell’articolo…:D

      • Stefano
        31 marzo 2010

        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
        31 marzo 2010

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

  11. Stefano
    1 aprile 2010

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

  12. Stefano
    2 aprile 2010

    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.

    • Francesco Gavello
      6 aprile 2010

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

  13. Kolor
    14 aprile 2010

    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?

    • Francesco Gavello
      15 aprile 2010

      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.

  14. Kolor
    15 aprile 2010

    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

    • Francesco Gavello
      15 aprile 2010

      Usa una forma del tipo


      $(” #divcontenutoprincipale img, #idDiv1, .classe2 ”).lazyload {

      e via discorrendo, separando con una virgola i riferimenti della chiamata a lazyload :)

  15. Kolor
    15 aprile 2010

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

    • Francesco Gavello
      15 aprile 2010

      Ottimo!

      Felice di esserti stato d’aiuto :D

  16. Matt
    5 luglio 2010

    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

  17. Francesco Gavello
    6 luglio 2010

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

  18. Davide
    22 luglio 2010

    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?

    • Francesco Gavello
      22 luglio 2010

      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.

      • Davide
        22 luglio 2010

        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
        22 luglio 2010

        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
        1 settembre 2010

        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
        1 settembre 2010

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

  19. Lui
    1 settembre 2010

    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

  20. Lui
    2 settembre 2010

    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

    • Francesco Gavello
      2 settembre 2010

      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″

  21. Lui
    3 settembre 2010

    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

    • Francesco Gavello
      3 settembre 2010

      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.

      • Lui
        3 settembre 2010

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

  22. Kolor
    2 novembre 2010

    Dal lato Seo come è visto LazyLoad?

    • Francesco Gavello
      2 novembre 2010

      Ciao Kolor,
      LazyLoad non altera il codice HTML delle tue pagine, quindi gli spider continueranno a vedere i riferimenti alle immagini come se non fosse attivo nessun particolare effetto.

  23. franco.pentangeli
    6 aprile 2011

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

    • Francesco Gavello
      6 aprile 2011

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

  24. Veronica
    17 aprile 2012

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

    • Francesco Gavello
      19 aprile 2012

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

  25. Andrea
    6 luglio 2013

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

  26. zerouno
    24 luglio 2013

    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.

    • Francesco Gavello
      24 luglio 2013

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

      • zerouno
        25 luglio 2013

        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.

  27. Vincenzo
    13 novembre 2013

    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

  28. Vincenzo
    13 novembre 2013

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

  29. Filippo
    29 giugno 2014

    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

  30. Deals Dust
    30 novembre 2014

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

  31. Antony
    22 gennaio 2015

    Lo devo assolutamente utilizzare, grazie mille

  32. gennaro
    8 giugno 2015

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

    • Francesco Gavello
      9 giugno 2015

      Ciao Gennaro,
      non sono sicuro di aver capito la domanda, tuttavia se ti riferisci a un’installazione di WordPress.org (self-hosted) e non sei pratico con il codice o con l’FTP, puoi usare uno dei tanti ottimi plugin come Rocket Lazy Load.

  33. Giorgio
    15 dicembre 2015

    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.

    • Francesco Gavello
      21 dicembre 2015

      Ciao Giorgio,
      grazie mille! Purtroppo è difficile capire da cosa possa dipendere senza agire sul layout: hai già provato in un contesto “vanilla”, spegnendo sistematicamente altre feature o plugin per isolare il problema?

Rispondi

 

 

 

Torna su
cellulare pc desktop