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 Image may be NSFW.
Clik here to view.
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!
L'articolo Velocizzare il caricamento delle immagini con jQuery sembra essere il primo su Target Web.it.