Capita spesso di vedere su molti siti il tipico messaggio 'Loading....'. In genere viene applicato su pagine molto pesanti o ricche di grafica. Avvisa gli utenti che è in corso il caricamento di tutti i contenuti e scompare non appena esso è disponibile completamente al browser. L'implementazione offerta con questo script è di una semplicità disarmante e scaturisce da un'integrazione tra CSS e Javascript. Nell'esempio allegato l'effetto non sarà ovviamente apprezzabile, dal momento che il caricamento avviene in locale e che la pagina è leggerissima. Vi invitiamo a provarlo dopo aver caricato la pagina su un server e dopo averla arricchita di contenuti un po' 'pesanti'.
- esempio.htm
## 1: LA SEZIONE CSS
Nella sezione <head></head>, prima del codice Javascript, va inserita una fondamentale parte CSS:
#loading {
width: 200px;
height: 100px;
background-color: #c0c0c0;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
text-align: center;
}
Si tratta di una serie di regole atte a formattare un div con id 'loading'. Ovviamente, è possibile personalizzare come si desidera tutti gli aspetti, dallo sfondo ai colori, badando però a rispettare la denominazione 'loading' dell'id.
## 2: LA PARTE JAVASCRIPT
Subito dopo inseriamo le poche righe Javascript:
<script type="text/javascript">
<!--
document.write('<div id="loading">Attendi il caricamento della
pagina...</div>');
window.onload=function(){
document.getElementById("loading").style.display="none";
}
// -->
</script>
Lo script si occupa innanzitutto di inserire nella pagina, tramite la classica istruzione 'document.writè un div con id="loading" (vedi sopra). Sarà nostra cura inserire il testo che desideriamo mostrare agli utenti.
Subito dopo, lo script verifica l'avvenuto caricamento della pagina e, quando tutto il contenuto sarà disponibile, provvederà a nascondere il div, che verrà sostituito con il contenuto normale.
