Copriamo la pagina con un contenitore, formattato dai css, fino a che tutti gli elementi presenti non vengano caricati nella cache del browser.
Il codice css per la formattazione del contenitore
<style type="text/css">
html body {
margin:0;
padding:0;
}
#preload {
width: 100%;
height:100%;
position: fixed;
top:0;left:0;
color:white;
text-align: center;
background: #000000 url("img/loading.gif") center no-repeat;
}
#preload h1 {
margin:0;padding:0;
margin-top: 180px;
}
</style>La funzione javascript da inserire nella head
<script type="text/javascript">
document.write('<div id="preload"><h1>Caricamento in corso</h1></div>');
window.onload = function() {
document.getElementById("preload").style.display = "none";
};
</script>