How to: mostrare un popup mentre la pagina si sta caricando
Come avete notato su InformaticItalia da un pò di tempo ho creato un popup durante il caricamento della pagina, oggi vi spiegherò come crearne uno per il vostro sito.
Per prima cosa ci serve un immagine di caricamento, se ne avete già una potete leggere direttamente il paragrafo successivo, altrementi, potrete crearne una tutta vostra in 2 secondi andando su siti come Load Info o Preloaders. Entrambi sono gratuiti e facili da utilizzare, in pochi secondi potrete avere la vostra immagine di caricamento anche se non siete esperti con la grafica, come nel mio caso.
Dopodichè dobbiamo caricare l’immagine sul web, per questo possiamo utilizzare qualche image hosting (come Image Shack, per esempio) oppure hostarla direttamente sul nostro sito.
Caricata l’immagine non dobbiamo fare altro che inserire questo codice nel nostro sito:
<style>
#loading{
position:absolute;
width:200px;
height:200px;
left:40%;
top:40%;
z-index:1;
background-color: #FFFFFF;
font:20px Arial, Helvetica, sans-serif;
color:#000000;
padding:20px;
}
</style>
<div id=”loading” style=”border: 1px solid #000000″><p align=”center”>La pagina si sta caricando…<br><br><img src=”indirizzo web immagine di caricamento“></p></div>
<script>
function finish(){
document.getElementById(“loading”).style.visibility = “hidden”;
}
</script>
Al posto di “indrizzo web immagine di caricamento“ dovete mettere il link della vostra immagine, il link deve essere diretto ad essa, non a pagine che la mostrano semplicemente.
Aggiunto questo codice dobbiamo aggiungere onload=”finish()” al tag body in modo che risulti <body onload=”finish()”>. Dopodichè, dopo aver aggiornato i files, dovremmo vedere correttamente l’mmagine, se così non fosse provate a svuotare la cache del vostro browser.
Se riscontrate problemi non esitate a commentare!
Loading ...
set 10, 2009 a 18:51:47
ciao,dove si trova il tag body in un template?
set 11, 2009 a 16:37:35
@dipo:
Di solito è nell'header di un template, nella testata; è alla fine del tag head, dopo tutti i meta tag e le cose varie :).
Di solito una pagina è fatta in questo modo:
<!DOCTYPE ecc…>
< html >
< head >
< title >Titolo della pagina</ title >
< meta tag come keyword e description >
< javascript e cose varie >
</ head >
< body >
CONTENUTO DELLA PAGINA
</ body >
</ html >
set 13, 2009 a 13:36:51
@Daivde
ci sono tutte quelle cose che hai descritto,però
c'e una stringa che dice e non