Velocizzare il caricamento delle immagini con jQuery

Velocizzare il caricamento delle immagini con jQuery

La lentezza durante il caricamento delle immagini durante l’apertura di un sito internet e’, fin dai tempi della 56K una croce di tutti i designer. Vediamo come “aggirare” in maniera molto elegante questo problema grazie all’utilizzo delle librerie jQuery.

Il plugin che vedremo e’ chiamato Lazy Load e da anni viene usato per rendere il caricamento delle immagini più curato, potete vedere una demo a questo indirizzo: Demo Lazy Load.

Come vedete le immagini vengono caricate man mano che scrollate la pagina con effetto fade davvero suggestivo. Possiamo ricreare questo effetto in tutti i nostri progetti, per integrare il plugin (in un sito HTML+CSS) usate questa sintassi:

Innanzitutto inserite le librerie JQuery e Lazy Load, indispensabile per il corretto funzionamento.

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.lazyload.js" type="text/javascript"></script>

A questo punto, sempre nell’head del vostro documento, inserite questo script di richiamo:

$("img").lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

Come vedete ho specificato l’effetto di fadeIn (comparsa) e ho aggiunto un “placeholder” che, in pratica, e’ quell’immagine che viene temporaneamente caricata mentre il server richiama la vostra immagine. Il placeholder può essere anche un’immagine costruita da noi, tra i placeholer inclusi nel pacchetto vi sono quello grey (grigio) e bianco.

E’ possibile anche usare il plugin senza l’effetto fadeIn in questo modo:

$("img").lazyload();

Oltre a questo e’ anche possibile impostare una sensibilita’ in questo modo:

$("img").lazyload({ threshold : 200 });

P.s ricordate sempre di includere i tag <script> </script> !

Usare il plugin con WordPress

Ad ogni modo, il plugin risulta molto utile in altri ambiti, come ad esempio nella gestione di un blog, dove le immagine sono molte, e talvolta pesanti. Potete scaricare il plugin ufficiale QUI.

Il plugin si configurera’ in automatico 😉 nel caso voleste personalizzarlo, entrate nella gestione plugin, fate click su modifica et voila’, potete agevolmente cambiare il tipo di placeholder, e tutte le altre impostazioni.

Escludere determinate sezioni al plugin Lazy Load (come la sidebar)

Nel caso voleste usare il plugin solo per determinate sezioni del vostro blog ( e’ sconsigliato usare il plugin per le immagini in sidebar per via di un bug che non le fa apparire prima di un ulteriore scroll), cambiate la seguente riga:

jQuery("img").lazyload({

Con:

jQuery("#content").find("img").lazyload({

In questo modo il plugin agira’ solo nella sezione (div) chiamato #content (accertatevi del nome che avete dato al vostro div prima di procedere). Ovviamente essendo scritto in jQuery, valgone le regole e la sintassi dei selettori jQuery, pertanto se volessimo includere, oltre al content anche un altro div (come il footer) dovremmo modificare il codice in questo modo:

jQuery("#content,#footer").find("img").lazyload({

Separando i div con la virgola.

A presto ! se vi e’ servito commentate!

  1. Ciao grazie per la risposta
    ho fatto che da guida almeno sembra ma non mi funziona dove sbaglio?

    $(“img”).lazyload({
    placeholder : “images/grey.gif”,
    effect : “fadeIn”
    });

    grazie

  2. ops non si vede il codice porvo a cancellare solo le

    script src=”jquery.js” type=”text/javascript”></script
    script
    $("img").lazyload({
    placeholder : "images/grey.gif",
    effect : "fadeIn"
    });
    script

  3. niente non riesco a inserire il codice per farlo vedere e non riesco a farlo funzionare

    e per caso perche e un sito in php? e no in html?

    grazie

    1. Ovviamente al posto di “"” e “<” spero avrai inserito i simboli corrispondenti. Detto questo le variabili di errore sono così tante che non ti saprei dire (ad esempio con php devi verificare percorsi, DOM etc etc), è come chiedere a un ingegnere come mai è crollata una casa senza nemmeno guardarla 😉

      Suggerimenti:
      – Verifica i percorsi
      – segui le linee guida del sito ufficiale, aitandoti con il mio articolo
      – Verifica di aver messo le librerie jquery
      – Prova creando un file “vuoto” html e vedi se riesci a implementarlo dopodichè vai per tentativi e provi a implementarlo nel tuo sito. (potresti avere qualche conflitto/cosa che non va nel sito in cui lo vuoi mettere)

  4. Grazie per le risposte,
    ho fatto come mi hai consigliati ,di creare una index.html nuova e di fare delle provo,
    ed in fatti funziona una meraviglia.
    pero’come mai lo stesso contenuto lo inserisco sul sito in php non mi funziona?

    Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Icone Twitter - 3 bellissimi set gratuiti

Icone Twitter - 3 bellissimi set gratuiti