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!
Grazie per le info, avevo visto questa cosa in alcuni blog e non sapevo come facevano, mi sa che proverò a usarlo anche io!
Grazie evil, benvenuto nel sito spero ci seguirai ancora!
Grande riccardo, bel post.. e soprattutto bel posizionamento!! ;))))
Marco
Grazie! =)
Bello ma i file jquery.js jquery.lazyload.js dove si scaricano che non li trovo nemmeno qua’ http://www.appelsiini.net/projects/lazyload
grazie
Ciao Luca se usi WP puoi usare direttamente questo plugin http://wordpress.org/extend/plugins/jquery-image-lazy-loading/
se invece vuoi la versione liscia alla fine della pagina http://www.appelsiini.net/projects/lazyload troverai la sezione “DOWNLOAD” cliccando su “minified” ti aprirà il codice da salvare. Ovviamente jquery.js sono le “solite” librerie jquery che trovi nell’official page di jquery http://jquery.com/
😉
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
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
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
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)
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
Sara’ qualcosa nel file .htaccess?
[…] Come Ritardare il Caricamento delle Immagini con Lazy Load (jQuery) Velocizzare il caricamento delle immagini con jQuery […]