Preload Page

You are looking at a layer covering the entire page.
This layer fades out once the page has loaded


For this example I have delayed the fade for 5 seconds

The trick is to create a layer that covers the entire page and shows over the top of the page contents.
When the page has loaded the layer is faded out to reveal the contents.

<script type="text/javascript">
<!--

function preloadPage(){
document.getElementById("preloaddiv").style.width=document.body.scrollWidth
if(document.body.scrollHeight<document.body.clientHeight){
document.getElementById("preloaddiv").style.height=document.body.clientHeight 
}
else{
document.getElementById("preloaddiv").style.height=document.body.scrollHeight
}

fadeValue=99
unhide()
}

function unhide(){

if(fadeValue>0){
if("filters" in document.body && "alpha" in document.body.filters){
document.getElementById("preloaddiv").filters.alpha.Opacity=fadeValue
}
else{
document.getElementById("preloaddiv").style.opacity=(fadeValue/100)-0.01
}

fadeValue-=5
setTimeout("unhide()",50)
}
else{
document.getElementById('preloaddiv').style.display = "none"
}

}

// add onload="preloadPage()" to the opening BODY tag
// -->
</script>

<BODY onload="preloadPage()">
<div id="preloaddiv" style="position:absolute; left:0; top:0; width:800; height:500; filter:alpha(opacity=100);opacity:0.99; z-index:20; background-color:white">
This layer fades out once the page has loaded

</div>