Many a times web developers come across situations where there are large time-consuming things that need to be done in the
Page_Load event, and we don't obviously want the end-user to see just a plain white screen. A "Loading.." message or a Loading-GIF would be more user friendly. This article tells how to show such a message.
Using the Code
The complete sample website can be downloaded from here.
Open the website from .Net IDE Open->Web Site->File System->(the downloaded and unzipped folder).
A loading message can be displayed in two different ways. Let's see both.
<input id="btnLoad" type="button" value="Load Page" onclick="LoadPage()" />
var loadPageURL = '\Loading.html';
window.location = loadPageURL;
In the "Loading" page's body, we add a function to be called on page load.
The page content has just a GIF image. Add any information that you want to give the user.
window.location = '\SlowPage.aspx';
The second method is a little more complicated. We use no redirection. The technique used here is the operations to be performed during
page_load are moved to a
var _isInitialLoad = true;
_isInitialLoad = false;
setTimeout('__doPostBack(\'<%= this.btnPageLoad.ClientID % > \' , \' \' );' ,100);
The hidden button on whose click event we do all the page load events and the hidden textbox to tell us if page load operations are done.
<asp:Button ID="btnPageLoad" runat="server" Text="Page Load"
Style="display: none" UseSubmitBehavior="false" />
<input type="hidden" id="hdnLoaded" runat="server"/>
Loading" message. (Grouped in a
<div id="divLoading" runat="server" style="text-align: center">
<br /><br /><br /><br />
<span style="font-size: 10pt; font-family: Verdana">
[Please wait while the page is loading...]
<img src="Images/ajax-loader.gif" alt="Loading..." /><br />
The server side code looks like below. All page load operations (or atleast time consuming independent operations) are moved to the button click event.
protected void btnPageLoad_Click(object sender, EventArgs e)
hdnLoaded.Value = "true";
divLoading.Visible = false;
This is all. It took a while for me to find help when I needed this kind of a thing. So here's one for others. Hope this helps someone.
This is my first article on The Code Project. Any comments to improve are most welcome.
- 24th February, 2009: Initial post