Click here to Skip to main content
15,867,308 members
Articles / Web Development / XHTML

Loading Message when Page Loads

Rate me:
Please Sign up or sign in to vote.
4.87/5 (51 votes)
24 Feb 2009CPOL2 min read 174.4K   5K   70   13
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.

HTML
<input id="btnLoad" type="button" value="Load Page" onclick="LoadPage()" />

The JavaScript function:

JavaScript
<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.

HTML
<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.

JavaScript
<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.

HTML
<body onload="PageLoad()"> 

The JavaScript function called triggers a delayed button click event (using setTimeout):

JavaScript
<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.

HTML
<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.)

HTML
<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.

C#
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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
I'm currently working as Software Developer in a OPD.

Comments and Discussions

 
Questiongood article..setTimeout worked for me also. Pin
Prashant Gham 00726-Sep-11 2:28
Prashant Gham 00726-Sep-11 2:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.