I have a page which updates a series of database tables and as each table is updated it writes additional information to the browser using the server side scripting option to flush what's been done already to the browser.
In order to keep the user in suspense, I also use the following:
<head>
...
<style type="text/css">
div.lDiv
{
font-size: 95pt;
background-color: gray;
font-family: Arial, sans-serif;
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
}
</style>
<script language="javascript">
function fadeInPage()
{
if (document.layers)
{
document.layers['loadingDiv'].visibility = 'hidden';
return true;
}
if (document.getElementById("loadingDiv").filters.alpha.opacity > 0)
{
document.getElementById("loadingDiv").filters.alpha.opacity -= 5;
setTimeout("fadeInPage()",100)
}
else
{
document.getElementById('loadingDiv').style.visibility = "hidden"
}
}
</script>
</head>
<body onload="fadeInPage()">
<div id="loadingDiv" class="lDiv" style="filter:alpha(opacity=50);">
Please Wait
</div>
...
This puts a nice big "Please Wait" over the top of the page content and fades it out after the page finishes loading.