Decrease Font Size
Increase Font Size

ASP.NET redirect a web page with AJAX loading indicator image

ASP.NET page redirecting progress indicator |

Progress Indicator |

Progress Indicator For Slow-Loading Pages |

ASP.NET intermediate processing page |

ASP.NET AJAX loading page |

ASP.NET intermediate page |

ASP.NET Menu Target |

ASP.NET progress indicator |

AJAX loading indicator |

Page Loading Indicator |

ASP.NET progress bar



There are times when the web pages that the web applications are redirecting to, might take some time to response or load. For instance, after the users successfully login into a web application, the application will redirect the request to the home page. Imagine that, if the mentioned page contains a dashboard and many personalized WebParts. The requested web page might take some time to respond depending on the users Internet connection speed and the amount of network traffic at any given time. Some users might get impatient and tempted to click on other buttons or links on the page, see figure 1. To overcome this problem, first, redirect the request to an intermediate page, and then load the requested page from there. The main purpose of the intermediate page is to display an AJAX loading indicator image (figure 2), while the users wait for the requested web page to respond.

Figure 1
no loading indicator
Figure 2
with loading indicator


Create an HTML page and name it Redirecting.html, add an image tag in the body section and wrap it in a div element. See listing 1

Listing 1

<div style='position:absolute;z-index:5;top:45%;left:45%;'>
    <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /><br /> <br />

Add the JavaScript shown in listing 2 below the div tag. In this JavaScript, we have two global variables namely querystring and page, and a public function called toPage. After reading the JavaScript best practices article, I decided to employ the JavaScript module pattern. I have created a namespace called redirect to wrap the mentioned public variables and function. The variable querystring will return the query string value in the current URL. The page variable will return the substring of the querystring from index of "=" to the end of the string. The purpose of the function toPage() is to append a Header to refresh the web page for browsers other than Internet Explorer (IE). If the browser type is IE and its version is greater than or equal to 4, then use the location.replace function to replace the current URL with new location URL. The redirect.begin() will invoke the toPage() method.

Listing 2

<script type="text/javascript">
    /* <![CDATA[ */
    this.focus(); //focus on new window
    redirect = function() {
        var querystring =; //query string
        var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
        function toPage() {
            if (page !== undefined && page.length > 1) {
                document.write('<!--[if !IE]>--> <head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
                document.write(' \n <!--[if IE]>');
                document.write(' \n <script type="text/javascript">');
                document.write(' \n var version = parseInt(navigator.appVersion);');
                document.write(' \n if (version>=4 || window.location.replace) {');
                document.write(' \n window.location.replace("' + page + '");');
                document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');
                document.write(' \n } else');
                document.write(' \n window.location.href="' + page + '";');
                document.write(' \n  <\/script> <![endif]-->');
        return {
            begin: toPage
    } ();


    /* ]]> */

Using the Code


<a href="Redirecting.html?page=test.aspx" target="_blank"> Redirect and Open on new page</a>

//requested web page with multiple query string
<a href="Redirecting.html?page=">
	Redirect with multiple query string</a>

Points of Interest

When I tested this JavaScript on browsers other than Internet Explorer, the image did not render correctly. Injecting a Header to refresh the page instead of calling the location.replace or location.href solves the problem.

I encapsulated the JavaScript in a HTML page because the whole process does not require server side programming and I can reuse it in others web applications that are written in different programming languages.

On IE 6, the order of the lines shown below is very important. If we place 2 before 1, the image will not display on IE 6. The current order works fine on both the IE 6 and 7.
1) document.write(' \n window.location.replace("' + page + '");');
2) document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');


I hope someone will find this tips useful. If you find any bugs or disagree with the contents, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might have left out some useful information. Tested on IE 6.0/7.0, Firefox, Google Chrome, Apple Safari 4.0.4, Verizon BlackBerry Storm

Tested on IE 6.0/7.0/8.0, Google Chrome, Firefox, Safari


JavaScript best practices

Watch this script in action




Comments (38) -

  • tooth whitening

    12/22/2009 10:33:19 PM |

    How to add timer on code behind file which redirect to another page after 10 secs? ASP.NET?

  • zoom whitening

    12/24/2009 3:59:39 AM |

    I am very new to, and am having a lot of trouble getting the vertical scroll-bar to work. Can anybody let me in on some scroll-bar code to make this work? Thank you!

  • glamour images

    12/26/2009 3:11:42 AM |

    Need to know which brand has the best service and costs cheap. Not interested about advance features, intended for old couples.THANKS..

  • Budget Van Lines

    12/28/2009 3:39:11 AM |

    i wonder if theres a more elegant solution..

  • Recycled Mugs

    12/28/2009 3:33:16 PM |

    Is it ok to redirect a web page to another web page while its in the Google index?

  • boat builders

    12/30/2009 12:57:35 AM |

    Is there a way to block the redirect meta tag when viewing a web page?

  • cosmetic dentistry

    12/31/2009 2:53:50 AM |

    Is there away to redirect a web page, to a random a link on that page.?

  • Miami web design

    1/3/2010 1:08:42 AM |

    This i one of the hardest part of web designing. To make work the codes you input in all the existing browsers.

  • Car Hire in Hobart

    1/4/2010 3:25:35 PM |

    I want to buy a blue-tooth phone to use for some java software that I'm designing and i don't want to spend too much money on it. I don't care very much about other characteristics, it just has to have blue-tooth and has to be java-enabled.

  • men's health magazine

    1/7/2010 8:14:35 PM |

    Before becoming a workaholic, I used to do a lot of rock climbing. Prior to any big climb, I'd review the route in the guidebook and read the recommendations made by people who had visited the site before. But, no matter how good the guidebook, you need actual rock climbing experience.

  • Watch Series

    1/15/2010 9:26:39 AM |

    The watch series is willing to have a video streamer can you please suggest how it would be if i prder the frame design in .net

  • Weight Loss Tips

    1/15/2010 11:39:46 AM |

    Hey, just thought you might want to know that your website looks messed up when I view it on my Nokia N95. I'm not sure if it has something to do with my phone's browser or your website.


  • Refurbished Computers

    1/19/2010 11:05:57 AM |

    Very informative article. I’ve found your blog via Yahoo and I’m really glad about the information you provide in your posts. Thank You for sharing this very informative article... Regards…

  • logitech z-5500 review

    1/25/2010 10:10:23 PM |

    Love your site I'm going to subscribe.

  • James @ overclock Intel Quad Core

    1/28/2010 1:30:54 AM |

    This was just what I was looking for... Thanks!

  • Jim @ CPU overclock Guide

    1/28/2010 3:36:28 PM |

    Dude.. I am not much into reading, but somehow I got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often.

  • Los Angeles Search Engine Optimization

    2/8/2010 3:47:18 PM |

    timer on code behind file which redirect to another page after 10 secs? ASP.NET?

  • Ron

    2/9/2010 7:17:28 PM |

    Thanks a lot man...looks good and will make my job easier Smile

  • ipage review

    2/11/2010 5:14:15 PM |

    This is a outstanding piece, I discovered your weblog looking around Google for a related theme and arrived to this. I couldn't discover to much other information and facts on this piece, so it was great to discover this one. I will be returning to look at some other articles that you have another time.

  • Jarrod Check

    2/18/2010 8:23:52 AM |

    Ditto with the last comment


    2/21/2010 4:06:54 AM |

    Great blog, keeping me from working! This is the kind of information people expect from all blogs

  • Stevie

    3/12/2010 3:01:08 PM |

    This is interesting, please post more often! Is there a place to donate to your site?

  • 3/15/2010 5:24:14 AM |

    These posts are very clear and concise: good job.

  • David

    3/22/2010 1:20:48 PM |

    Great blog, keeping me from searching, I really interested to know more

  • web directory

    3/23/2010 2:04:30 PM |

    Hello Briyan, very informative post as i m learing for sharing

  • silicuda

    3/29/2010 5:51:57 PM |

    incredible things thanx ...)

  • Destiny

    3/30/2010 4:14:40 PM |

    It's Very good

  • Clark Harris

    4/4/2010 5:10:39 AM |

    Remember to, are you capable to PM me and tell me few of a great deal more thinks about this,
    I am really fan of the weblog...

  • freeads

    4/14/2010 2:02:50 PM |

    this is a great blog post
    desurves a bookmark and a new subscriber

  • Kate

    4/21/2010 8:14:26 PM |

    Ok. This is great information on page redirecting progress indicator.

  • Thomas Collins

    5/17/2010 12:03:58 PM |

    I adore your weblog

  • lyrics

    5/19/2010 12:50:53 PM |

    nice blog

  • Charles Campbell

    5/23/2010 5:02:11 AM |

    Hey very nice weblog!!! Guy .. Gorgeous .. Incredible .. I'll bookmark your blog and consider the feeds also...

  • Sai

    11/20/2010 3:55:29 AM |

    Really a good Post Smile but i am facing some problem with this code when i use it in my code like

    " htmlfile: Operation Aborted "

    when i debug this html file Frown Please help me, as i dont know what went wrong ???

  • chord

    12/14/2010 12:01:48 AM |

    nice post

  • rumah mungil yang sehat

    12/15/2010 11:20:33 PM |

    Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up!

  • Toothache Remedy

    12/20/2010 7:31:09 PM |

    I really like your articles

  • Death facebook statuses

    2/4/2011 1:33:12 PM |

    I loved this article. It was so great.

Pingbacks and trackbacks (6)+

Add comment