Ritardare il Caricamento delle Immagini con Lazy Load

Lazy Load, ispirato da YUI ImageLoader di Matt Mlinac è un semplicissimo file javascript che evita che il tuo browser carichi tutte le immagini che si trovano al di sotto della scroll bar dello stesso.

Quali sono i vantaggi? Semplice, le pagine si caricano in maniera piú rapida e gli utenti possono navigare senza contenuti caricati in background e dei quali magari non faranno uso.

Vediamone nel dettaglio l'implementazione:

Passo 1: JQuery

Innanti tutto caricate JQuery nel vostro sito. La versione minified é perfetta.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
.google.load("jquery", "1.3.2");
</script>
    

Passo 2: Lazyload.js

Caricare il file javascript di Lazy Load e richiamarlo:

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

Passo 3: Inseriamo il codice

Non vi resta che caricare il seguente snippet nell'header o prima della chiusura del tab body:

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

Importante: soffermatevi sulla variabile "failurelimit". In layout non esattamente "lineari", come spesso lo sono quelli di blog e siti web complessi è necessario infatti incrementare la tolleranza standard per permettere che proprio tutte le immagini vengano prese in considerazione.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.