Introduction
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).
Code
A loading message can be displayed in two different ways. Let's see both.
Method 1
Here the target page is not called directly. An HTML page with loading message is called which in turn calls the target page immediately (through JavaScript).
On button click, a JavaScript function is called which will redirect the user to the "Loading" HTML page.
<input id="btnLoad" type="button" value="Load Page" onclick="LoadPage()" />
The JavaScript function:
<script type="text/javascript">
function LoadPage()
{
var loadPageURL = '\Loading.html';
window.location = loadPageURL;
return false;
}
</script>
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.
<body onload="Redirect()">
On page load, this JavaScript is called which immediately redirects to the actual page. But this page's content will be displayed in the browser till the other page loads fully.
<script type="text/javascript">
function Redirect()
{
window.location = '\SlowPage.aspx';
}
</script>
Method 2
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 button_click event (of a hidden button) and the page load contains absolutely nothing. So the page loads quickly. There's a loading message that is placed in the HTML content of the page which shows up. Then using a delayed JavaScript call, we trigger a postback (button click event). There we shall perform all the operations that we had actually intended to do on page_load.
On load of the page, we call a JavaScript function.
<body onload="PageLoad()">
The JavaScript function called triggers a delayed button click event (using setTimeout):
<script type="text/javascript">
var _isInitialLoad = true;
function PageLoad()
{
if(_isInitialLoad)
{
if (document.getElementById('hdnLoaded').value)
{
_isInitialLoad = false;
setTimeout('__doPostBack(\'<%= this.btnPageLoad.ClientID % > \' , \' \' );' ,100);
}
}
}
</script>
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"
OnClick="btnPageLoad_Click"
Style="display: none" UseSubmitBehavior="false" />
<input type="hidden" id="hdnLoaded" runat="server"/>
The "Loading" message. (Grouped in a div tag.)
<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...]
</span>
<br />
<img src="Images/ajax-loader.gif" alt="Loading..." /><br />
</div>
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.
History
- 24th February, 2009: Initial post
