Supponiamo di avere una pagina del nostro sito con alcune immagini da mostrare. In questo caso è sempre opportuno non far attendere troppo l'utente che, con una connessione lenta, impiegherebbe diverso tempo per visualizzarle tutte.
Per porre rimedio si ricorre ad un preload in javascript che, come si intuisce facilmente, si occupa di precaricare le immagini nella cache del pc del visitatore.
In questa maniera, quando verranno richiamate dal browser, le foto saranno molto più veloci da scaricare. Il codice è utilissimo anche nel caso in cui la pagina abbia dei bottoni in rollover.
Da notare anche che lo script che presentiamo mostra una barra di caricamento ogni volta che "entra in azione"; un effetto sicuramente non fastidioso e che dà un tocco di originalità al sito.
Lo script è perfettamente compatibile con Explorer 5.x, Netscape 6.x e NN 4.x.
L'esempio si compone di 3 file:
- esempio.htm
- esempio2.htm
- preload.js
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Basta inserire questa stringa nelle pagine che desideriamo:
<script language="javascript" src="preload.js" type="text/javascript"></script>
Per personalizzare lo script, invece, dovremo aprire il file .js con un qualsiasi editor di testo.
Vediamo cosa personalizzare.
var imagenames=new Array( 'foto.jpg');
questa è la stringa più importante. è l'array che contiene i nomi delle immagini da precaricare. Due sono le cose importanti da seguire:
- inserire i nomi ESATTI delle immagini (se non ne viene trovata una si blocca lo script)
- separare i nomi da virgole, dopo averli racchiusi tra due apici
Se ad esempio avessimo 3 immagini da precaricare l'array sarebbe così scritto:
var imagenames=new Array( 'foto.jpg','foto2.jpg','foto3.jpg');
var yposition=250;
è la distanza della barra dal margine superiore (in pixel)
var loadedcolor='gray' ;
indica il colore della barra nello stato di avanzamento
var unloadedcolor='whitè;
indica il colore di sfondo della barra
var barheight=15;
indica l'altezza, in pixel, della barra di preload
var barwidth=350;
indica la lunghezza, in pixel, della barra di avanzamento
var bordercolor='black';
indica il colore del bordo della barra
Altre modifiche non sono necessarie.
