Ritardare Il Caricamento Delle Immagini con Lazy Load

Ritardare il Caricamento delle Immagini con Lazy Load
by Janeth Kent Date: 25-04-2013


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.

 
by Janeth Kent Date: 25-04-2013 visite : 2288  
 
Janeth Kent

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 END DEVELOPMENT.

 
 
 

Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni". Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".

Accetta tutti Solo cookies del sistema Configurazione