How to show google mail like loading image/please wait... message while page data loads

March 21, 2008 02:45 by pradeep.mishra
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.
   1:  Loading Demo
Demo.aspx is the web content form which fetches data from a database.
   1:  <!-- Code to fetch data from a database -->

To show loading message add following code to the code behind of master file Site.master.cs

   1:   
   2:  protected override void OnLoad(EventArgs e) 
   3:  { 
   4:  if (!IsPostBack) 
   5:  { 
   6:  Response.Buffer = false;
   7:  Response.Write("
   8:  <div style="top: 2px; left: 2px; width: 83px; height: 19px; text-align: right; background-color: orange">
   9:  Please wait...
  10:  </div>
  11:  "); 
  12:  Response.Flush(); 
  13:  } 
  14:  base.OnLoad(e); 
  15:  } 
  16:  protected override void Render(HtmlTextWriter writer) 
  17:  { 
  18:  if (!IsPostBack) 
  19:  { 
  20:  Response.Clear(); 
  21:  Response.ClearContent();
  22:  } 
  23:  base.Render(writer); 
  24:  } 
in the Site.master.aspx file add following javascript at the end of the file.
   1:   
   2:  try{
   3:  var divLoadingMessage = document.getElementById("divLoadingMsg");
   4:  if (divLoadingMessage != null && typeof(divLoadingMessage) != 'undefined') 
   5:  { 
   6:  divLoadingMessage.style.display="none"; 
   7:  divLoadingMessage.parentNode.removeChild(divLoadingMessage); 
   8:  } 
   9:  }
  10:  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 this works? 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! [Thanks to lijo, my friend, for this nice solution] kick it on DotNetKicks.com

PS: This is my old post from http://technoesis.wordpress.com. I have imported the comments as well


Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading