How to show google mail like loading image/please wait… message while page data loads
Posted by Pradeep Mishra on March 4, 2008
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.
<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.
<!-- Code to fetch data from a database -->
To show loading message add following code to the code behind of master file Site.master.cs
protected override void OnLoad(EventArgs e)
{
if (!IsPostBack)
{
Response.Buffer = false;
Response.Write(“
“);
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.
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 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!
Tech - Noesis 
Lukas said
How would you implement this without master pages. I have a web service I’m loading on a page and would like to have the message displayed (on the latter page) while it loads and obviously show the result from the web service when it loads.
Thanks
Pradeep Mishra said
Yes you can still do that. You can think of master page as top container and content page as a control inside top container. The concept about Asp.net Page Events is that they are raised from the innermost control to outermost control. So Why don’t you create a base page in your UI layer and derive all the UI pages from this base page and your base page should be derived from System.UI.Page. Write the same method in BasePage class.
public class BasePage : System.Web.UI.Page
{
public BasePage()
{
}
protected override void OnLoad(EventArgs e)
{
if (!IsPostBack)
{
Response.Buffer = false;
Response.Write(“
“);
Response.Flush();
}
base.OnLoad(e);
}
protected override void Render(HtmlTextWriter writer)
{
if (!IsPostBack)
{
Response.Clear();
Response.ClearContent();
}
base.Render(writer);
}
}
The only problem you can face is writing script at the end of each content page. However here is the modified Constructor of Base Class ..See if it works else let me know..
public BasePage()
{
if (!this.Page.ClientScript.IsStartupScriptRegistered(“loadscript”))
this.Page.ClientScript.RegisterStartupScript(typeof(Page), “loadScript”, ““, false);
}
Mahesh said
Hi there, this sounds realy useful. I am trying to use your example. but it doesn’t work for me. It’s giving a javascript error. please help.
Hugone said
The only problem there is that when ASP.NET runs the Response.Write line, it places it at the beginning of the code in the ASPX file, so you’ll get something like
…
in your page, which is quite inconsistent
Hugone said
Sorry, last one didn’t show:
The only problem there is that when ASP.NET runs the Response.Write line, it places it at the beginning of the code in the ASPX file, so you’ll get something like
<div…>
<html><head>…</head>
…
</html>
in your page, which is quite inconsistent
piyal said
really. this is working.. cool!!
Jeyakumar said
It is working fine. Very useful to relax the user till the page loads.
But, in my case, I am loading crystal report in my page for which I am passing the parameter from the drop down list in the same page.
So I have commented the Postback checking in both functions OnLoad & Render. (ie) Allow the code to run even in the post back case also.
The problem here is that the “EXPORT” option in the crystal report doesn’t work; instead it throws error: “Server cannot set content type after HTTP headers have been sent.”. I hope that the EXPORT function may use the RESPONSE object & content type.
Can any one pls help me solve this issue?
Thanks in Advance. 🙂
farheen said
Hi,
m trying to use this code but in my case it is not showing any thing and the master page is loading after the content page, why this is happening…
sanjay pathak said
i have two question
ques. 1.
when we apply ur code for page loading its shows the fallowing error.and message “please wait..” already exist after page loading.
Error is=Cannot redirect after HTTP headers have been sent.
if possible please send me a complete page containing ur code
Question 2.
how i can find the client ip address
Suresh said
Hi,
This article is very usefull , but here is a small change we required. i.e
it is worked in Mozila but it doesn’t working in InternetExplorer…
How to write the code to work both in Mozilla as well as InternetExplorer…
Ankur said
HI,
Your article is very useful. But I have a little different scenario. IN my case I am using master page but I want to show loading image only for a particular content page. Is their any way to do so??
Thanks, looking forward for your reply
Ashu said
Hi,
Your code seems to be very useful for my requirement. But what do you mean by adding the javascript code at the end of the masterpage.aspx ?
Waiting for the reply. TIA .. 🙂
Regards,
Ashu Goel
hrt said
tryrt
Pradeep Mishra said
In the master page ad the javascript just before body tag ends using tags
Duraid said
Hi,
I have tried but the problem every page has CollapsiblePanelExtender you cant close them anymore all CollapsiblePanels open. It will be great help if you can help me.
Thanks
Duraid
Sandesh said
When I ran this code…. Please wait meesage is showing continuosly on page load…it like it going in infinite loop and didnt stop loading page…..what would be the problem…if u want i can paste my code…
Sandesh said
It work finally but Please wait meesage is not disappering
sandrar said
Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.
Kumarakom Kerala said
Kumarakom Kerala…
[…]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…
[xbox360|xbox 360 games|games on xbox 360] said
[xbox360|xbox 360 games|games on xbox 360]…
[…]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…
Tori Spelling said
Sites we Like…
Only a small number of internet sites have this sort of information. From our point of view are certainly well worth visiting…
money said
money…
[…]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…
smslån 3000 said
smslån 3000…
[…]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…
website said
website…
[…]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…
webmaxterlk said
Cool.. Thank you !
funny pics with captions said
I actually wanted to write a message so as to thank you for all of the wonderful
tips and tricks you are placing here. My time-consuming internet search has
finally been recognized with reliable insight to talk about with my
friends. I would repeat that most of us website visitors are extremely endowed to dwell in a wonderful community with many lovely individuals with interesting guidelines.
I feel rather happy to have discovered your entire website
and look forward to many more fabulous times reading here.
Thanks a lot once more for everything.
Johng822 said
This is why Facebook games are becoming more popular. The ease of use and dissemination of content, tagging deefffdfkfde