Lazy load delle immagini

by Andrea 16 September 2010 05:01

Per velocizzare il caricamente delle pagine del mio blog, ho modificato il template aggiungendo la funzionalità di Lazy Load delle immagini presenti nei post.

Mi è venuto in aiuto il Lazy Load plugin per jQuery.

Questo plugin permette di far caricare le immagini solamente quando rientrano nella parte renderizzata del browser, evitando quindi di eseguire il download di tutte le immagini al caricamento della pagina. Evitando di scaricare le immagini nn presenti nell'area visibile della pagina, si velocizza (e di molto) il caricamento, in quanto vengono notevolmente ridotti i byte trasmessi.

Le modifiche che ho dovuto fare alla Master-Page del mio tema sono le seguenti:

  • Aggiunta della libreria jQuery dalla CDN di google, e dello script del Lazy Load plugin, e il tutto in versione ridotta:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/jQuery/jquery.lazyload.mini.js" type="text/javascript"></script>
 
  • Aggiunta della funzione per attivare il Lazy Load delle sole immagini incluse nei post, agendo sul selettore jQuery, in modo da applicare questo comportamento alle immagini contenute nel div .text:
<script type="text/javascript">
  $(function() {
    $(".text img").lazyload({ 
      placeholder : "images/blank.gif",
      threshold : 200 });
  });
</script> 

Nel mio blog, come placeholder ho fatto uso di una gif trasparente dalle dimensioni di 1px per 1px, in modo da evitare la fastidiosa X rossa durante l'attesa del caricamento dell'immagine.

Tutte le informazioni del plugin le trovate a questo link: Lazy Load Plugin for jQuery

Tags: , ,

ASP .NET | Internet | Sito

Comments

04/01/2011 12:25 #

Hi. Is it possible to translate this into my language and use it on my blog?

Thanks for the info.

Napad

Napad United Kingdom |

10/01/2011 00:05 #

Hi Napad, if you want, in this page http://www.appelsiini.net/projects/lazyload you can find all instruction for adopt this functionality.

Andrea Italy |

04/04/2011 08:33 #

Non funziona più...

Mi dispiace deludere i fan di Lazyload ma non funziona più proprio il metodo usato da Lazyload e da qualsiasi altro plugin che sfrutti questo meccanismo.

Perché?

I browser più recenti cominciano a scaricare le immagini nel flusso dell'html. Questo significa che le immagini vengono scaricate nel momento in cui il DOM di JS ancora non ne sa dell'esistenza.

Nel momento in cui LazyLoad comincia a funzionare, le immagini sono già state scaricate e lo script si limita a nascondere il SRC ponendo il valore in ORIGINAL.

Allo scrolling nella zona, chi non ha la cache attivata, si trova a riscaricare per la seconda volta l'immagine.

Test effettuato su Firefox 3.6 con Firebug e scheda NET attivata, senza scorrere la pagina le immagini sono state scaricate in 200 OK con le relative dimensioni e tempistiche...

Gab Italy |

Comments are closed