How to Show Google Mail Like Loading Image/please Wait… Message While Page Data Loads

For a better user experience you would your users to see please wait message while browser render the page completely. Here is the one solution to the same problem.

Let’s create a master page called Site.master and a web content form as demo.aspx.

DemoObject
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<title>Loading Demo</title>
    <form>

<div>

<!-- Page Header will go here... -->

</div>

<div>


                                            <!-- Page-specific content will go here... -->


</div>

<div>

<!-- Page Footer will go here... -->

</div>

Demo.aspx is the web content form which fetches data from a database. To show loading message add following code to the code behind of master file Site.master.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
protected override void OnLoad(EventArgs e)
  {
  if (!IsPostBack)
  {
  Response.Buffer = false;
  Response.Write( Please wait…“);
  Response.Flush();
  }
  base.OnLoad(e);
  }
  protected override void Render(HtmlTextWriter writer)
  {
  if (!IsPostBack)
  {
  Response.Clear();
  Response.ClearContent();
  }
  base.Render(writer);
  }

in the Site.master.aspx file add following javascript at the end of the file.

1
2
3
4
5
6
7
8
 try{
 var divLoadingMessage =  document.getElementById("divLoadingMsg")
 if (divLoadingMessage != null && typeof(divLoadingMessage) != 'undefined')
        {
            divLoadingMessage.style.display="none";
            divLoadingMessage.parentNode.removeChild(divLoadingMessage);
        }
    }catch(e){}

That’s it now all your pages using Site.master will be showing Please wait.. message when the page starts loading. Of course instead of putting a message you can put a nice web2.0 loading image in between divLoadingMsg tags. So how does it work? The onLoad event of master page will be called before any of the content web form’s Onload event. as soon as master page loads div tag becomes visible. After the page has loaded completely the script written at the end of the master page hides the div tag. so simple isnt’t it.Hope this helps!

Comments