Progressbar for Slow Loading Webpages

Introduction

Most of us develop web pages generating dynamic data from databases. Summary pages and reports experience a slow loading white page, particularly when the product is on a live or a staging server. The end user on seeing the white page would be tempted to click 'Refresh' button of the browser or 'Back' button, either or both of the operations may hinder with our normal script operations over the server side, unless explicitly handled by them.

This scenario can be remedied in a Windows Form or application, almost quite easily, since we have animation controls to keep the user engaged with the animation till the other operations like download of a huge report finishes off. Even in the case of WebForm, a little JavaScript can really come to our aid in making the page more responsive to the user, indicating to him that some operation is in progress. This coupled with the slow moving Internet Web Browser progress bar would instill some confidence to the user that the application is doing a long, time consuming work, and he need to wait a while for it to complete.

The Solution

The solution is quite simple. Just at the start of the page which is rendering the long reports, make it to render the following script code:

<DIV ID="slowScreenSplash" STYLE="position:absolute;z-index:5;top:40%;left:15%;" 
align="center">
   Please wait whilst your request is being processed...
</DIV>

This needs to come even before any rendered Tables since Web browsers delay rendering the Tables until its closing </TD> or a similar tag is reached.

With this code block in place, you will get the message:

Please wait whilst your request is being processed...

somewhere near the bottom of your screen (see the offset of 40% from top margin and 15% from the left margin).

Next Step:

Next, on report being fully loaded, this code has to be hidden. You can either call the following code in window.onload or at the fag end of the page, within the <script></script> blocks:

document.all["slowScreenSplash"].style.display = "none";

Plus:

Additionally, you can add certain JavaScript tricks like having a small 1x1 gif and keep it filling to show a sliding progress bar and all those things. But the bottom-line is to have a minimal progress indicator for the long operation that the webpage is doing and hence any inadvertent user interventions like Back button click, Refresh button click etc. may adversely affect the script operations.

I hope this code snippet and logic would be greatly useful for Web Developer fraternity worldwide.