Loading Message when Page Loads

Vasanth.S.R

Rate me:

4.87/5 (51 votes)

24 Feb 2009CPOL2 min read

174.7K

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

Download source - 17.45 KB

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.

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

24^th 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

Vasanth.S.R

Web Developer

India

I'm currently working as Software Developer in a OPD.

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

Loading Message when Page Loads

Introduction

Using the Code

Code

Method 1

Method 2

History

License

Comments and Discussions