Maybe you have a page with delicate scripting and you don't want users to touch anything until it finishes loading, or perhaps your form is processing and you need to make sure they don't panic and run before it finishes. Either way, a splash screen with an "In Progress" indicator would help to calm the frightened users and make life easier for your tech support staff.
Here, then, we have a succinct little bundle of code that will do just that. To begin, you'll need to add a line to the top of the page in question. The line is this (ASP VBScript):
Response.Buffer = True
This instructs the server not to send anything back to the client until (a) the page is finished processing or (b) you use Response.Flush to send it everything so far. Incidentally, this will usually help your page speed as well, since the server doesn't have to switch back and forth between executing the page and sending pieces of it to the browser.
Here -- preferably between the <HEAD> and </HEAD> tags -- we build the JavaScript that decides which of the two major browsers is calling the page, and henceforth which Document Object Model (DOM) to use. Since the script is performing client-side operations, I have chosen to use client-side detection. See my previous article, Is It Human? for more information on server-side browser detection.
<SCRIPT LANGUAGE="JavaScript">
// This script is intended for use with a minimum of Netscape 4 or IE 4.
// First we detect the browser type
if(document.getElementById) { // IE 5 and up, NS 6 and up
var upLevel = true;
}
else if(document.layers) { // Netscape 4
var ns4 = true;
}
else if(document.all) { // IE 4
var ie4 = true;
}
function showObject(obj) {
if (ns4) {
obj.visibility = "show";
}
else if (ie4 || upLevel) {
obj.style.visibility = "visible";
}
}
function hideObject(obj) {
if (ns4) {
obj.visibility = "hide";
}
if (ie4 || upLevel) {
obj.style.visibility = "hidden";
}
}
</SCRIPT>
Next, we have to build the DHTML that will become our splash screen, just like the ones desktop programmers get to use. For convenience, we'll assign the style attributes inline, but you could of course do this with a style sheet within the HTML <HEAD> element.
<DIV ID="splashScreen" STYLE="position:absolute;z-index:5;top:30%;left:35%;">
<TABLE BGCOLOR="#000000" BORDER=1 BORDERCOLOR="#000000"
CELLPADDING=0 CELLSPACING=0 HEIGHT=200 WIDTH=300>
<TR>
<TD WIDTH="100%" HEIGHT="100%" BGCOLOR="#CCCCCC" ALIGN="CENTER" VALIGN="MIDDLE">
<BR><BR>
<FONT FACE="Helvetica,Verdana,Arial" SIZE=3 COLOR="#000066">
<B>Page Loading. Please wait...</B></FONT> <BR>
<IMG SRC="wait.gif" BORDER=1 WIDTH=75 HEIGHT=15><BR><BR>
</TD>
</TR>
</TABLE>
</DIV>
Style it any way you want; just make sure that the ID attribute is the same name that our client-side JavaScript uses to address the element later on. Just for the record, our splash screen looks like this:
Page Loading. Please wait...
|
At this point you'll want to send the splash screen to the client while the rest of the page is processed. For this reason it is advisable to put the splashScreen DIV as close to the beginning of the <BODY> as possible, in order to send it out quickly without waiting for the rest of the page. To do this, we send the following ASP command:
Response.Flush
Now comes all the processing and grinding that keeps the user waiting. When we come to the end of the page -- just before the closing </BODY> tag -- we send all the code out with another
Response.Flush
...and then add the final JavaScript that turns off the splash screen. You could trigger the hideObject function with an onLoad() event handler in the <BODY> tag instead, but you would still need to build the object references after the splashScreen DIV appears in the code, or the browser would complain that your DIV doesn't exist yet.
<SCRIPT LANGUAGE="JavaScript">
if(upLevel) {
var splash = document.getElementById("splashScreen");
}
else if(ns4) {
var splash = document.splashScreen;
}
else if(ie4) {
var splash = document.all.splashScreen;
}
hideObject(splash);
</SCRIPT>
You can download a sample file with all the necessary code here, including the sample progress bar image.
