HTML/JavaScript Splash Screen

Posted: Mar 4, 2007 Last modified: Apr 27, 2018

I recently had to create a "waiting for results..." type page that would disappear when the results were ready to be displayed. The message was necessary because the results in question would take a long time to download. Initially I thought I'd need to use Ajax for this, but I didn't and the method I ended up going with was surprisingly easy to implement. The skeleton of the implementation is outlined below.

First of all, a "message" DIV that contains the "waiting" message is displayed. Below this is the "results" DIV which, through the use of CSS, is hidden to users. When the page loads, a JavaScript function is called that hides the "message" DIV and displays the "results" DIV (i.e. reverses the initial hidden/visible settings). To execute the function only after the page has fully loaded, the function is called from within the onload attribute of the body tag. Both DIVs have unique IDs so that they can be referenced from the JavaScript code.

To help the message convey to the user that the page is waiting for the results to download, the message can be accompanied by an animated GIF similar to a progress bar or some other progress indicator (not necessarily one that moves toward a 100% end point; it may simply rotate or flash, for example). Via a search, I found some websites offering free images for this purpose.

That is the basis of the solution. However, I also found that it was necessary to flush the contents of the HTML document as of the end of the waiting message so that it would be pushed toward the browser before the code that searches for the results was executed. This was done in PHP using output buffering.

Here is a pseudo-code representation of the page:

<html>
...
<body onload="hideWaitingMessage()">
<script ...>
function hideWaitingMessage() {
  // Get style objects for the message & results DIV tags
  
  // Hide the message DIV
  
  // Display the results DIV
}
</script>

<div id="message">Please wait while we download the results...
  <br />
  <img src="animation.gif" /></div>

<div id="results" style="... hidden ...">
<p>Result 1</p>
<p>Result 2</p>
<p>Result 3</p>
...
</div>

</body>
</html>