Per velocizzare il caricamento di una pagina web si può agire in diverse maniere, dalle più ovvie come immagini ottimizzate, riduzione dei file css e js creando dove possibile un raggruppamento di quest'ultimi ecc.
Sul blog simonedamico, nella sezione jQuery, ho trovato un utilissimo suggerimento e molto facile da applicare.
Si tratta di una tecnica che agisce su tutte le immagini presenti sulla pagina e fa si che vengono caricate solo le immagini necessarie per la parte di pagina che in quel momento è visibile sullo schermo.
Il metodo si chiama Lazy Load ed parte di jQuery.
In pratica non appena si scrolla una parte di pagina non ancora visualizzata, verranno automaticamente caricate le altre immagini che si trovano sullo schermo e così via. E' l'opposto della tecnica "image preload". Pensandoci bene, perchè caricare subito tutte le immagini di una pagina quando probabilmente non arriveremo nemmeno in fondo alla pagina?
Ecco il codice necessario, per il resto vi rimando al blog di simonedamico dove troverete tante "chicche" utili per il vostro sito, naturalmente in fondo all'articolo troverete il link al progetto jQuery Lazy Load.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery("img").lazyload({ effect:"fadeIn", placeholder: "http://mysite/images/images/grey.gif" }); }); |
