65.9K
CodeProject is changing. Read more.
Home

Loading Message when Page Loads

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (44 votes)

Feb 24, 2009

CPOL

2 min read

viewsIcon

177185

downloadIcon

4977

To display a loading message (or GIF) when the page_load has functions that take a long time

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'; //Intermediate page with "Loading" message 
    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'; // Redirect immediately to the actual page
}
</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)
  {
    //Check to make sure the page load doesn't gets called over and over
    if (document.getElementById('hdnLoaded').value)  
    {
       _isInitialLoad = false;
       
       //Triggering a postback after 100 milliseconds 
       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)
{
  //Some operation that takes long time

  //Setting a hidden variable will help avoiding a loop of 
  //postback triggered from client side script.
  hdnLoaded.Value = "true";
  divLoading.Visible = false; // Make the loading message invisible
}

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