Monday, May 18, 2009

Showing Loading-Indication when loading HTML webpage


Completion of webpage loading will take more time if there is any time consuming process such as querying huge database needs to be completed.

If there is no indication about this time consuming process then user will be getting confused. They won't know whether any process is going on or some problem occurred.

In this case, we should show some indication to the user so that they can wait till completing the process.

In this article,I will explain about how to do this indication effectively.

1. Put an animated gif (e.g loading.gif as shown below ) to indicate loading of page in your web folder.


2.Within the body tag of html file place this code

<div id="PopUpBackGround" >
<img src="loading.gif" alt="Loading...." />
</div>


3. Then define the style for the above div tag in your CSS style sheet file as below.

#PopUpBackGround
{
z-index: 1400;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=70);
opacity: 0.7;
display: block;
background: #333;
padding-top: 15%;
padding-left: 15%;

}


It will be used for graying out the webpage till the page loading is completed. By setting very high z-inex the user will be prevented from changing anything in the screen till the page loading gets completed.

4.By calling javascript function on onload event hide this div tag once after page loading is completed. It can be done by using below code.

<body onload="document.getElementById('PopUpBackGround').style.display='none';>




More Articles...

No comments:

Search This Blog