Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Loading!

Link copiato negli appunti

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.

Ti consigliamo anche