Attendere per favore...
Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
L'esperienza maturata con la gestione di Risorse.net, e la nuova attività che sta coinvolgendo i responsabili del sito (per chi non lo sapesse, Roberto e Alessandro Abbate sono i moderatori di it.comp.www.html) ci hanno dato la possibilità di capire quali fossero le esigenze degli utenti e quali le domande poste più frequentemente. Tra queste, molti chiedono come inserire una riga di testo del tipo "Attendere prego..." che sparisca una volta che tutta la pagina venga caricata. In questo modo, il documento verrebbe visualizzato nella sua interezza, senza essere scaricato oggetto per oggetto.
Questa settimana inseriamo proprio una demo del genere. La sintassi che la compone non è difficile da comprendere e nel peggiore dei casi, l'unica personalizzazione da applicare, sarebbe quella di modificare la frase "Attendere per favore...". Ecco comunque come si presenta il sorgente:
<script>
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************/
// Browsercheck
n=document.layers
ie=document.all
// Hides the layer onload
function hideIt(){
if(ie || n){
if(n) document.divLoadCont.visibility="hidden"
else divLoadCont.style.visibility="hidden"
}
}
</script>
<style>
#divLoadCont{position:absolute; width:100%; height:95%; top:0; left:0;
background-color:white; layer-background-color:white; font-family:arial,helvetica;
z-index:100}
TD{font-family:arial,helvetica}
</style>
Il codice appena visto, viene riportato nell'<HEAD> del documento. Oltre allo script per il funzionamento del tutto, è presente il Css con, tra le altre cose, lo stile del testo che indica l'attesa per il caricamento del documento.
Passando al <BODY>, notiamo che è presente il richiamo al Javascript appena esaminato, oltre ad un'immagine che abbiamo inserito noi della redazione giusto per farti notare la scritta "Attendere per favore...". E' ovvio che, meno tempo ci metta la pagina a caricarsi, meno secondi rimarrà visualizzato il testo.
<body onload="hideIt()">
<script>
// We write the table and the div to hide the content out, so older browsers won't see it
if(ie || n) document.write('<div id="divLoadCont"><table width="100%" height="95%" align="center" valign="middle"><tr><td width="100%" height="100%" align="center" valign="middle"><h3>Attendere per favore....</h3></td></tr></table></div>')
</script>
<IMG SRC=http://www.risorse.net/dhtml/allegati/immagine.gif ALT="Quest'immagine è stata inserita solo per dimostrare il funzionamento dell'esempio"><BR>
</body>
All'interno del blocco di sorgente appena visto, possiamo notare dove è presente il richiamo alla frase "Attendere per favore...". Per modificare lo stile del testo, fare attenzione alla riga:
font-family:arial,helvetica; z-index:100
Presente nel Css esaminato nella prima parte di sintassi sorgente.
N.B.: Vuoi provare ad apparire in testa ai motori di ricerca? Risorse.net ti
offre gratuitamente una guida sui principali search engine e validi consigli
per apparire in buona posizione. Clicca www.risorse.net/motori
© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net
/dhtml/teoria/2000/dicembre/63.asp?print=ok