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

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 2

http://rvsg.net/images

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.