Lo script che presentiamo sarà utile nei casi in cui il caricamento della pagina sia relativamente lento; nell'attesa potremo mostrare ai visitatori un qualsiasi messaggio: un semplice avviso, una news, un annuncio commerciale. Il testo è all'interno di una tabella (che può contenere anche codice html) e sparirà non appena sarà visibile tutta la pagina.
L'esempio si compone di 1 file:
- esempio.htm
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.
Impostiamo tra i tag <head>, come prima cosa, il foglio di stile necessario allo script:
<style type="text/css">
#cache { position:absolute; top:200px; z-index:10; visibility:hidden;}
</style>
Adesso, sempre tra i tag <head>, inseriamo il resto del codice:
<div id="cache">
<table width=400 bgcolor=#000000 border="0" style="border-width:1; border-
color:ff0000; border-style:dashed;" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle>
<table width=100% bgcolor=#ffff00 border="0" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle><font face="verdana" size=3
color=#000000><br /><strong>attendere...caricamento in corso</strong></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache}
else if (dom) {cach = document.getElementById("cache").style}
else if (iex) {cach = cache.style}
largeur = screen.width;
cach.left = Math.round((largeur/2)-250);
cach.visibility = "visible";
function cacheOff()
{
cach.visibility = "hidden";
}
</script>
Vediamo come personalizzare la tabella contenente il messaggio. Riguardo al foglio di stile il parametro che più ci interessa è:
top:200px;
indica la distanza, dal margine superiore della pagina, in cui verrà posizionata la tabella
<table width=400 bgcolor=#000000 border="0" style="border-width:1; border-color:ff0000; border-style:dashed;" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle>
<table width=100% bgcolor=#ffff00 border="0" cellpadding=0 cellspacing=0>
<tr>
<td align="center" valign=middle><font face="verdana" size=3 color=#000000><br /><strong>attendere...caricamento in corso</strong></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
è una normale tabella in html e contiene il messaggio da visualizzare. Possiamo impostarla a piacimento.
cach.left = Math.round((largeur/2)-250);
è la stringa che posiziona la tabella a centro schermo. un valore più alto (ad esempio -600) sposterà la tabella a sinistra e viceversa.
Ultima operazione fondamentale è inserire un evento onLoad nel body che permetterà alla tabella di sparire non appena la pagina sarà caricata:
onLoad="cacheOff()">
e quindi il nostro <body> sarà strutturato così:
<body onLoad="cacheOff()">
Altre modifiche non sono richieste.
