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.