Display Ajax Loader while page rendering

Question

This is probably a simple question but how can I best use an AJAX loader in ASP.NET to provide a loading dialog whilst the page is being built?

I currently have an UpdatePanel with an associated UpdateProgressPanel which contains the loading message and gif in a ProgressTemplate.

Currently I have a page that onLoad() goes and gets the business entities and then displays them. While it is doing this I would like to display an AJAX loader.

Would it be better to have nothing in the page load and have a hidden button that is triggered onLoadComplete or unLoad() which would then wait for the button click method to complete displaying the UpdateProgressPanel?

Answer 1

You can do it in HTML outside of .Net. In your ASPX page you have code like:

<div id="loading">

<!-- Animated GIF or other indication that stuff is happening -->

</div>

At the very bottom of your page, right before the you can have a code snippet that looks like this:

<script language="javascript">

  document.getElementById("loading").style.display = "none";

</script>

The graphic--- as long as it's at the top of the page--- will render first. Then all of your onLoad stuff will happen, and finally the inline JavaScript will happen last since it's at the bottom of the page.

A lot of times I'll disable the buttons in their unloaded state and enable them in that bottom JavaScript too. That prevents the user from getting click happy and triggering events before the page is ready.

Answer 2

I've done something similar with a Timer control. Your OnLoad just turns on the timer, and the page finishes rendering. Then the timer (with some minimal interval value) does the dirty work, showing the progress panel correctly. Remember to turn off the timer as the last step of the process.

Answer 3

If you really want fine grained control you can use a progressbar based AJAX pre-loader. You can configure it so as to complete every time the state has changed. i.e. from 0 to 4 (5 ready states) with each state progressing by 20%.. Creating one is extremely simple. Have a container div which holds another div whose width varies from 0 to 100% in steps of 20% for each state. Add a background-color to the inner div (example: blue) to make it look like its progressing. GMail i guess uses a similar approach for its Pre-loader.

Answer 4

The post is old but you can look out http://ajax.net-tutorials.com/controls/updateprogress-control/