Attesa caricamento pagina in Javascript
- Gennaio 11, 2010
- by
- Donatantonio
Durante il caricamento di una pagina web può spesso risultare comodo e stilisticamente elegante presentare al visitatore un’animazione di attesa.
In genere tale animazione si concretizza con una classica rotellina ruotante seguita dal testo “Loading…”. Lo script proposto si compone di poche righe javascript, precedute da codice CSS per gestirne lo stile. Verrà visualizzato a monitor un box con sfondo grigio con una piccola animazione; tale box scomparirà quando la pagina sarà completamente caricata.
<html>
<head>
<title>Loading…</title>
<style type="text/css">
#loading {
width: 280px;
height: 280px;
background-color: #c0c0c0;
position: absolute;
left: 50%;
top: 50%;
margin-top: -140px;
margin-left: -140px;
text-align: center;
}
</style>
<script type="text/javascript">
document.write(‘<div id="loading" align="center"><img src="http://www.donatantonio.net//immagini/mini_loading.gif" alt="Caricamento" /><br><br>Attendi la pagina richiesta…</div>’);
window.onload=function(){
document.getElementById("loading").style.display="none";
}
</script>
</head>
<body>
<!– Il contenuto della pagina… –>
</body>
</html>
Di seguito viene fornita l’immagine in formato gif utitlizzata nello script.
