JQuery effect on page load

Question

I have a page that does some time-consuming stuff in the page load(actually that is all it does). I would like to present the users with a decent message and then replace it once the process is complete with the actual results.

Every thing I try make the UI to render after the long process ends, which doesn't help. I tried using an UpdatePanel to make the page render and then trigger the update from the client but it doesn't work either.

Can someone give me a clue on how to do this?

Thanks

Answer 1

I'd suggest you do the following:

1. Create a new Page that only shows whatever it is you want to show while it is loading. A loading graphic or otherwise.
2. Via AJAX call your current page and have it return success or failure or whatever you want to return to page 1.
3. After the ajax call returns you can replace the loading icon or html with your sucess graphics.

HTML page 1: <div id="content"><img src="images/loading.png" alt="loading" /></div>

jQuery:

$.ajax({
    type: "GET",
    timeout: 30000,  // set accordingly
    url: "/some/url", // this is the page that will do all the work
    beforeSend: function() {
      // do some stuff
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert("An error has occurred making the request: " + errorThrown); // if there was an issue
    }, 
    success: function() {
    $('#content').html('Success!!'); // change icon or what you need to do.
    }
    });

I can't get the UI to format the code correctly. Jquery ajax reference: http://api.jquery.com/jQuery.ajax/

Answer 2

You could use the jQuery BlockUI plugin - in your ready handler , you'd block, process, then unblock.

If there's a large amount of data flowing down to the client, there will be a perhaps uncomfortable period before the ready handler kicks off and blocks the page, so another strategy is to have a <div> that covers the page (with your "please wait, loading" message in it) that you hide at the end of your ready handler.

Answer 3

If you are using ASP.NET WebForms you can use UpdatePanel and UpdateProgress to display image while something is loading. Just point updateprogress control to updatepanel control. UpdateProgress will containg loading image and updatepanel you main content and controls. However, UpdateProgress and UpdatePanel are an ugly tools written by Microsoft, I would strongly recomment using jQuery with its true AJAX calls (it will involve more work though)