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!