Script javascript: Loading di attesa caricamento pagina

   difficoltà:  script script script script script

Script simili
13/11/2006


Con questo piccolo script vedremo come visualizzare un box di attesa durante il caricamento della pagina. A caricamento ultimato il box "Loading.." scomparirà.

<style>
#loading{
position:absolute;
width:200px;
height:100px;
left:300px;
top:180px;
z-index:1;
background-color: #6B718B;
font:40px Arial, Helvetica, sans-serif;
color:#ffffff;
padding:20px;
}
</style>
<div id="loading">Loading...</div>
<script>
function finish(){
document.getElementById("loading").style.visibility = "hidden";
}
</script>
<body onload="finish()">
// inserire qui il codice della pagina ad esempio un immagine di grosse dimensioni
<img src="http://www.site.it/immagine_grande.jpg">
</body>
Modificando lo stile del div loading potremo personalizzare la grafica del box di attesa.

N.B. Il box sarà molto probabilmente visualizzato solo al primo caricamento della pagina, quando ancora il contenuto non si trova nella cache del browser.




Commenti


  Teo

6/12/2006 15:04:33

Grazie per l'aiuto

  Alex

29/11/2007 16:09:54

Si ma con Internet explorer non funziona cioe non scompare a fine caricamento xke ?

  david

28/4/2008 17:21:24

molto carino, unico problema non è valid markup...come si può sistemare il codice ?
grazie
da

  Luca

9/10/2008 16:10:12

Forse si potrebbe rendere accessibile mettendolo in un file esterno e richiamandolo in ogni singola pagina...

  LUIGI PROTA

10/12/2008 20:31:10

Mi dispiace, vorrei tanto che funzionasse, ma non funziona proprio!
Per favore, perchè non lo provi e cerchi di trovare un rimedio efficace, che consenta, alla prima apertura della pagina, di far apparire l'immagine grande con la scritta loading e che, una volta che la pagina si è caricata, scompaia sia l'immagine grande che la scritta loading.
Attenzione, una volta che la pagina si è caricata la prima volta, ad una nuova riapertura non deve più apparire l'immagine grande e la scritta loading!!.
Grazie

  gigi

11/12/2008 16:42:51

Ciao!
Dunque, sono riuscito a far apparire in modo corretto la scritta loading. Per quanto riguarda l’immagine grande di sottofondo, se la inserisco secondo lo schema indicato, l’immagine appare, ma non scompare più a caricamento avvenuto.


A questo punto, l’indirizzo della mia immagine grande è il seguente:

<img src="C:\Documents and Settings\LUIGI\Desktop\MIO CD\CARTELLA DEI FILES\Immagine 435.jpg">

Per favore, mi dici a che punto del codice e con quali attributi devo inserirlo?
Grazie


  lucy

10/9/2014 17:46:59

Ma come fare a far comparire la scitta LOADING durante l'esecuzione di altre cose diverse dal caricamento di una immagine?
mi spiego:
<style>
#loading{
position:absolute;
width:200px;
height:100px;
left:300px;
top:180px;
z-index:1;
background-color: #6B718B;
font:40px Arial, Helvetica, sans-serif;
color:#ffffff;
padding:20px;
}
</style>
<div id="loading">Loading...</div>
<script>
function finish(){
document.getElementById("loading").style.visibility = "hidden";
}
</script>
<body onload="finish()">
// durante l'esecuzione di questo codice si dovrebbe verdere la scritta LOADING
// e solo quando la pagina si è FORMATA, visualizzare le 10000 righe
<%
dim i
for i = 1 to 40000
response.write("<br>" & i)
next
%>
</body>



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.