Corsi on-line

Ritardare il caricamento delle immagini con jQuery

Un ottimo e pratico sistema per velocizzare il caricamento delle pagine Web è quello di utilizzare una tecnica denominata Lazy Loading, essa consiste in pratica nel ritardare il caricamento delle immagini, o meglio, nel caricare le immagini solo quando necessario, cioè nel momento i cui, tramite, scrolling, viene visualizzata la porzione di pagina che le contiene. In sostanza, il Lazy Loading evita il caricamento in background di contenuti che, eventualmente, non verranno fruiti.

jQuery

L’utilizzo di questa particolare tecnica non è particolarmente complesso, a tale scopo la prima operazione da effettuare sarà quella di caricare la libreria jQuery, naturalmente minificata, nel caso in cui essa non sia stata già richiamata per il funzionamento di qualche altro script. Una soluzione ottimale prevede l’utilizzo di un CDN (Content Delivery Network), come per esempio quello di Google, in alternativa all’inclusione di un copia locale:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Una volta eseguita la chiamata a jQuery tramite posizionamento dell’inclusione tra i tag head, si potrà includere anche la libreria jquery.lazyload.js, un plugin, che potrà essere prelevato direttamente da GitHub, ispirato al progetto YUI ImageLoader:

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

Fatto questo si potrà aggiungere a fondo pagina un semplice script JavaScript all’interno del quale definire il limite per il caricamento delle immagini (nel nostro caso “10”, come vedremo non si tratta di un limite di tempo) e l’effetto associato al loro caricamento (fadeIn):

<script type="text/javascript">
	jQuery(document).ready(function(){
		$("img").lazyload({
		    failurelimit : 10,
		    effect : "fadeIn"
		});
	});
</script>

Impostando il parametro failure_limit sul valore “10”, il plugin smetterà di ricercare le immagini da caricare dopo aver trovato 10 diverse immagini, questo significa che per pagine che possano contenerne un maggior numero tale parametro dovrà essere più elevato.

Via Lazy Load Plugin for jQuery

Post correlati
I più letti del mese
Tematiche