Preload per le immagini

Questo script serve per evitare di vedere un "buco" vuoto nel tempo in cui una immagine (abbastanza pesante) viene caricata all'interno della pagina. Per ovviare a questo inconveniente si crea una scritta (nel nostro caso animata per rendere l'attesa meno noiosa) che prenda il posto dell'immagine fino a che questa non sara' completamente scaricata nella cache del browser e a quel punto sostituiamo l'animazione con l'immagine. Vediamo quindi il codice che ci serve:

<div id="preload" style="border:3px ridge lime;height:296px;width:300px;background:navy;">

</div>
<script language="javascript">

var msg_comp;
var msg_anim=new String();

function scrivi()
{
msg_comp="Caricamento in corso... ";
return msg_comp;
}

var punt=0;
var enable=1;

function anima()
{

if ((punt>23)&&(enable==1))
{
punt=-1;
msg_anim="";
preload.innerHTML=msg_anim;
anima();
}

else if ((punt<24)&&(enable==1))
{
var buffer = msg_comp.charAt(punt);
msg_anim+=buffer;
preload.innerHTML=msg_anim;

punt++;
}

}
scrivi();
setInterval("anima()", 125);

var img = new Image();
img.src="immagine.jpg";
img.onload = mostra;

function mostra()
{
enable=0;
preload.innerHTML="<img src='immagine.jpg'>";
}

</script>
Si crea l'oggetto che conterrà sia l'animazione che l'immagine, dandogli il nome di preload, specificando le dimensioni dell'immagine (utile se si vuole evitare che la scritta e l'immagine occupino un'area differente) e opzionalmente un bordo e un colore di sfondo.
Fatto questo inizia lo script.
Si creano due variabili che contenrranno il messaggio completo e una stringa (per ora) vuota.
Si crea la funzione che si occupa di scrivere la stringa e che ritorna la variabile stessa.
Successivamente si creano due variabili, punt che serve come puntatore per i caratteri che compongono la scritta "Caricamento in corso" e una variabile chiamata enable che serve come segnale di enable per la funzione che anima la scritta.
La suddetta funzione controlla se il valore di punt è maggiore di 23 (qui si poteva anche mettere msg_comp.lenght invece di 23, ma cosi' si capisce meglio quello che si fa), e se enable è 1.
Se è così si 'resetta' l'animazione mettendo punt uguale a -1, 'cancellando' msg_anim e mandando quest'ultima all'oggetto, che così viene 'cancellato'; infine si richiama anima().
Se invece si è ancora all'interno della stringa da visualizzare (punt<24) e enable==1 si deve far muovere la scritta.
Per fare questo si crea una variabile chiamata buffer che contiene il carattere corrispondente al valore di punt dentro la stringa. A questo punto si concatena la vecchia stringa con il nuovo carattere e si assegna questa nuova stringa all'oggetto preload e si incrementa la varibile punt.

Piccola parentesi: questo è il 'cuore' dell'animazione, in quanto nelle giuste condizioni, si prende dalla stringa la lettera successiva, si aggiunge alle lettere prese in precedenza, si mostra nell'oggetto e si passa al carattere successivo: questo in poche parole "anima" la scritta.

A questo punto si chiama la funzione scrivi() e si imposta l'intervallo per anima()
La parte successiva si occupa di caricare l'immagine nella cache e sostituirla alla scritta quando il download è completato. Per fare questo si crea una nuova variabile di tipo Image() chiamata img e le si assegna l'url della immagine da visualizzare e si specifica che al suo completo caricamento (onload) si chiama mostra().
Quest'ultima pone enable=0 che 'inibisce' il funzionamento dell'animazione e mette nell'oggetto preload il codice HTML necessario per visualizzare l'immagine.

Piccola nota riguardo il fatto che si 'inibisce' il funzionamento dell'animazione. Non mettendo quella condizione lo script visualizza ugualmente l'immagine ma continua a richiamare la funzione anima() ogni intervallo stabilito, consumando così delle risorse (so che con i processori di oggi neanche ci se ne accorge, ma tutti i prof all'università ci dicono sempre che &grave bene non sprecare mai le risorse!!!).