.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

16/08/2001 Attenzione: errata corrige a fine pagina..

      Uno script molto semplice che risolve un problema che molti webmaster si pongono: cosa presentare al visitatore nell'attesa che la pagina sia completamente caricata?
      La risposta che viene sempre data è quella di porre un layer a tutta pagina, e nasconderlo quando il documento è caricato.
      Questo script fa proprio questo lavoro: posto immediatamente sotto il tag <BODY> provvede ad inserire un layer (con sintassi diversa per Netscape 4 rispetto agli altri browser) di cui possiamo personalizzare il colore di sfondo ed il testo d'attesa, quando scatta l'evento "onLoad" del <BODY> lo script provvede a nascondere il layer rendendo visibile il documento.
      Vediamo lo script, anche questa volta ho usato il separatore [...] per spezzare le righe troppo lunghe:

// ----- Variabili di personalizzazione -----
var attesa="<FONT FACE='verdana, arial, helvetica' SIZE='+2'>L o a d i n g . . .</FONT>";
var colore="#ffff00";
// ----- Fine variabili di personalizzazione -----

if (document.layers)
   document.write("<LAYER NAME='loading' position=absolute z-index=0 top=0 left=0 [...]
      [...] width="+window.innerWidth+" height="+window.innerHeight+" bgColor="+colore+" [...]
      [...] visibility=show'><TABLE BORDER=0 WIDTH=100% HEIGHT=100% [...]
      [...] BGCOLOR="+colore+"><TR><TD ALIGN=center VALIGN=middle>"+attesa+"[...]
      [...] </TD></TR></TABLE></LAYER>");
else
   document.write("<DIV ID='loading' STYLE='position:absolute;z-index:0;top:0;left:0;[...]
      [...] width:"+eval(document.all?document.body.clientWidth:window.innerWidth)+";[...]
      [...] height:"+eval(document.all?document.body.clientHeight:window.innerHeight)+";[...]
      [...] layer-background-color:"+colore+";background:"+colore+";visibility:visible'>[...]
      [...] <TABLE BORDER=0 WIDTH=100% HEIGHT=100% BGCOLOR="+colore+">[...]
      [...] <TR><TD ALIGN=center VALIGN=middle>"+attesa+"</TD></TR></TABLE></DIV>");

function loaded(){
if (document.layers) // NN 4
   document.layers.loading.visibility="hide";
   else if (document.getElementById) // NN6, OP e IE5+
      document.getElementById('loading').style.visibility="hidden";
      else // IE4
         document.all.loading.style.visibility="hidden";

      All'inizio dello script troviamo le due variabili che ho previsto per consentire la personalizzazione dello script.
      La variabile "attesa" dovrà contenere il codice HTML di ciò che vorrete presentare al vostro visitatore. Io ho usato una semplice scritta "Loading..." resa con un carattere abbastanza grande. Nulla vieta naturalmente di usare un'immagine o al limite un piccolo filmatino in Flash, ma dovete tenere in buon conto però la dimensione di questo elemento: se richiede un lungo download l'utilità dello script va allegramente a farsi benedire! Se non usate un testo, l'ideale è un'immagine o un filmato pesante al massimo 5/6 Kb per far si che il modem la scarichi in pochi secondi. Attenzione naturalmente all'uso degli apici (specie se inserite un filmato), io ho usato come mia abitudine gli apici doppi come delimitatori di stringa, quindi all'interno della stringa potrete usare solo apici singoli o doppi preceduti da un backslash(\").
      La variabile successiva è "colore" e permette di specificare un colore che verrà usato sia come background per il layer che per la tabella.
      Segue la porzione di script che stampa il livello nel documento. Viene fatta una distinzione fra Netscape 4 (che non apprezza il <DIV>) e tutti gli altri browser. Comunque il livello è posizionato in modo assoluto e sopratutto con z-index=0, il che gli consente di piazzarsi sopra a tutti gli altri eventuali livelli presenti nel documento e di coprirli. Le dimensioni vengono impostate alla dimensione dell'area visibile del documento. Vengono usati innerWidth/innerHeitht per Netscape e clientWidth/clientHeight per Explorer. Notate che <DIV> viene usato anche per Netscape 6, quindi all'interno del document.write è presente una condizione

eval(document.all?document.body.clientHeight:window.innerHeight)

che discerne fra IEx ed NN6.
Per funzionare lo script ha bisogno dell'aggiunta di un event-handler nel <BODY> del documento:

<BODY . . . onLoad="loaded()">

      quando il documento è stato scaricato dal server al nostro browser, questo event-handler fa scattare la funzione loaded() che opera... la magia! :-)
      La funzione infatti non fa altro che discernere fra i vari browser (NN4/NN6- OPERA-IE5+/IE4) ed usa la giusta sintassi per nascondere il livello scritto dal document.write().
      Ora il nostro visitatore puà godersi la nostra pagina web.
      Un'avvertenza: ricordate che i FORM "bucano" i layers cioè i campi (text, select, radio ecc) non possono essere nascosti dai livelli, quindi non usate questo script se la vostra pagina congiene un form.

Infine mi sento di dare un consiglio dettato dall'esperienza (non consideratela una paternale! :-) NON abusate di questa funzione, usatela solo ed esclusivamente se la pagina merita davvero di essere presentata già completa, altrimenti rischiate che il sito non venga proprio esplorato perché il visitatore prima o poi si stuferà di vedere il vostro bel filmato... avete presenti quei siti con un filmato FLASH inziale in cui il webmaster si è "dimenticato" di inserire un link di skip?
Inoltre basatevi anche sulla VOSTRA esperienza: voi aspettate sempre che la pagina sia completa prima di cliccare su un link?....

Errata corrige! 16/08/2001 - Ho dovuto correggere il sorgente dopo averlo mandato on-line. Ho infatti scoperto troppo tardi che Netscape non riesce a gestire un oggetto (il layer) scritto con document.write tramite un file incluso. Vi consiglio dunque di inserire lo script direttamente nella pagina immediatamente sotto il tag <BODY> come vedete nell'esempio contenuto nel file ZIP da scaricare.

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!