SCOPO
Avviare un filmato al termine del caricamento della pagina html
STRUMENTI
METODO
Per Internet Explorer è previsto l'evento OnReadyStateChange che, opportunamente utilizzato, restituisce il grado di caricamento dell'intera pagina html, immagini, codice e testo. Ma dal momento che non funziona per tutti gli altri browser, non può essere utilizzata per caricare un filmato al termine dei restanti componenti della pagina.
Gli unici oggetti dei quali può essere verificato il caricamento su quasi tutti i browser sono le immagini, ed è su questa possibilità che si basa questa tecnica. Avremo nella pagina un filmato vuoto, dal peso irrisorio: controlleremo ciclicamente il caricamento di tutte le immagini nella pagina, e una volta completato, con il LoadMovie caricheremo il vero filmato sopra quello vuoto.
In questo modo prima si caricherà tutta la pagina, e poi inizierà il caricamento del filmato che spesso, come componente grafico, è meno importante del resto.
Codice html della pagina
• le funzioni Javascript
• il codice di incorporamento del filmato vuoto
• il codice di incorporamento delle immagini
<HTML>
<HEAD>
<TITLE>Caricamento filmato dopo le immagini</TITLE>
<script language="JavaScript1.1" type="text/JavaScript">
<!--
// funzioni Javascript
//-->
</script>
</HEAD>
<BODY bgcolor="#CCCCCC" onLoad="init()">
<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="[...]"
WIDTH="288" HEIGHT="100" ID="mainMovie">
<PARAM NAME=movie VALUE="imagesPreloader.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<EMBED
src="imagesPreloader.swf"
menu=false quality=high
bgcolor=#CCCCCC
swLiveConnect="true"
name="mainMovie"
WIDTH="288"
HEIGHT="100"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="[...]">
</EMBED>
</OBJECT>
<br><br>
<img alt="" src="prima.jpg" width="288" height="209">
<br><br>
<img alt="" src="seconda.jpg" width="288" height="209">
</BODY>
</HTML>
Come si vede, nella pagina è incorporato il filmato vuoto sul quale caricare quello principale, e due immagini, prima.jpg e seconda.jpg. È importante notare che:
• il numero delle immagini è arbitrario
• le immagini possono stare ovunque nella pagina: sopra il filmato, sotto, in una tabella, in un layer.
Altra cosa importante da notare è, associato all'evento onLoad nel tag <body>, il richiamo alla funzione init(), che inizializza la procedura di controllo del caricamento.
Le funzioni Javascript
<script language="JavaScript1.1" type="text/JavaScript">
<!--
// elenco con nomi e percorsi delle immagini da caricare prima del filmato
var immagini = new Array("prima.jpg", "seconda.jpg");
var sorgenti = new Array();
function init() {
for (var i = 0; i < immagini.length; i++) {
sorgenti[i] = new Image();
sorgenti[i].car = false;
sorgenti[i].onerror = function() {this.car = true;};
sorgenti[i].src = immagini[i];
}
controlla();
}
function controlla() {
for (var i = 0; i < sorgenti.length; i++) {
if(!sorgenti[i].car){
if(!sorgenti[i].complete){
setTimeout("controlla()", 50);
return;
} else {
sorgenti[i].car = true;
}
}
}
avvia();
}
function avvia() {
var IE = navigator.appName.indexOf("Microsoft") != -1;
var filmato = IE ? window.mainMovie : window.document.mainMovie;
// nome del filmato da caricare sopra quello vuoto
filmato.LoadMovie(0, "principale.swf");
}
//-->
</script>
Prima della definizione delle funzioni, nel codice Javascript è presente la dichiarazione della variabile immagini, un array contenente il nome e il percorso delle immagini presenti nella pagina. Nel nostro caso, dal momento che le due immagini incorporate sono prima.jpg e seconda.jpg, l'array viene dichiarato così:
var immagini = new Array("prima.jpg", "seconda.jpg");
Se le immagini fossero state tre, di cui una nella cartella images:
var immagini = new Array("prima.jpg", "images/seconda.jpg", "terza.jpg");
e così via.
La funzione init(), richiamata dall'evento onLoad del tag <body>, crea sorgenti, un array di oggetti Image con tanti elementi quante sono le immagini nell'array immagini. Ciascun oggetto Image avrà tre proprietà definite da noi:
1 • car : inizialmente settata come false, la trasformeremo in true a caricamento completo dell'immagine. Il nome car è arbitrario, può essere modificato a piacimento.
2 • onerror : un metodo che viene eseguito automaticamente nel caso in cui l'immagine, così come definita nell'array immagini, non esista o abbia un altro nome: setta il valore di car come true.
Questo ci serve perchè se mancasse un'immagine il filmato non verrebbe mai caricato: allora forziamo lo script a credere che l'immagine sia stata immediatamente caricata anche se non esiste. Il nome onerror è obbligatorio, non può essere modificato nemmeno nelle maiuscole e minuscole.
3 • src : una stringa contenente nome e percorso dell'immagine. Come si vede dallo script, viene presa direttamente dall'array immagini definito all'inizio. Il nome src è obbligatorio, non può essere modificato.
e una quarta proprietà attribuita automaticamente:
4 • complete : proprietà di sola lettura, restituisce un valore booleano indicante se l'immagine è stata completamente caricata oppure no: true vuol dire che è carica, false che non è ancora carica oppure che non esiste
Quindi, creato questo array di oggetti, la funzione init() chiama la funzione controlla(), che verifica periodicamente il caricamento di tutte le immagini.
function controlla() {
for (var i = 0; i < sorgenti.length; i++) {
if(!sorgenti[i].car){
if(!sorgenti[i].complete){
setTimeout("controlla()", 50);
return;
} else {
sorgenti[i].car = true;
}
}
}
avvia();
}
Con un ciclo for di tante iterazioni quanti sono gli elementi dell'array sorgenti, verifichiamo di ciascuno di essi se la proprietà car è falsa: se lo è, verifichiamo il valore di complete. Se complete è anch'essa falsa, vuol dire che l'immagine non è carica, e allora con il setTimeout programmiamo, a distanza di 50 millisecondi, un ennesimo controllo e fermiamo l'esecuzione della funzione con il return: in questo modo, il ciclo e la funzione si interrompono, e il richiamo ad avvia() non viene eseguito.
Se invece car è falsa, ma complete è vera (l'immagine esiste, è stata caricata, ma al controllo precedente ancora non lo era), settiamo car come vera.
Quando la proprietà car è vera per tutte le immagini, la funzione non si interrompe e viene eseguita la riga con il richiamo alla funzione avvia().
Notazione importante: se non avessimo settato il metodo onerror, che rende automaticamente vera la proprietà car quando l'immagine non esiste, il controllo su quell'immagine continuerebbe all'infinito (e il filmato non verrebbe mai caricato)
function avvia() {
var IE = navigator.appName.indexOf("Microsoft") != -1;
var filmato = IE ? window.mainMovie : window.document.mainMovie;
// nome del filmato da caricare sopra quello vuoto
filmato.LoadMovie(0, "principale.swf");
}
La funzione avvia() individua il filmato grazie ai tag di incorporamento per Javascript (id, swLiveConnect e name), e carica sopra di esso il vero filmato, principale.swf.
Da notare che il filmato viene caricato sul livello 0, prendendo il posto di quello precedente, e che quindi il preloader del nuovo filmato non ha bisogno di accorgimenti particolari.
