ASP.NET - Display Message While Page Is Loading

Question

I have a page that performs a long-running task (10 to 15 seconds) in the page_load method.

I have client-side javascript code that will display a decent "page loading" animated gif to the user.

I am able to invoke the JavaScript method from the code-behind, to display the "page loading" animated gif, however, the long-running task is hanging up the UI such that the animated gif doesn't actually display until after the long-running task is complete, which is the exact opposite of what I want.

To test this out, in my page_load method I make a call to the JavaScript method to display the animated gif. Then, I use Thread.Sleep(10000). What happens is that the animated gif doesn't display until after Thread.Sleep is complete.

Obviously I am doing something incorrect.

Any advice would be appreciated.

Thanks.

Chris

Below is an example of the code-behind:

protected void Page_Load(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript
              (GetType(), "Javascript", "javascript: ShowWaitIndicator(); ", true);

        Response.Flush();

        Thread.Sleep(10000);
    }

Answer 1

I accomplished this by placing a timer on the page. After its first tick disable it and run your task.

<asp:Timer runat="server" id="UpdateTimer" interval="500" ontick="UpdateTimer_Tick" />

I placed this within an UpdatePanel for my needs. I'm not sure what will work best for you. Then in your code behind...

Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As EventArgs)
        UpdateTimer.Enabled = False

        ' run method here

    End Sub

Answer 2

The reason is that the Page.Load event fires before any response has been sent to the client; so any instructions for the client (such as executing your javascript) doesn't occur until the client receives the response.

So... placing the long-running task in Page.Load won't have the effect you want. This sounds like a case for using AJAX or some other form of asynchronous data-retrieval. In this scenario the page you return to the client doesn't containt he result of your long-running task--so the page itself (with it's spinner) loads quickly, then the client requests the data; when the data is ready (10-15 seconds later) you can update the DOM in the client with the results.

Answer 3

Following example will work for you. just place in Page Load Event.

  Response.Write("<div id=\"loading\" style=\"position:absolute; width:100%; text-align:center; top:300px;\"><img src=\"http://www.cse.iitk.ac.in/users/singhroh/images/loading.gif\" border=0></div>");
  Response.Flush();
  System.Threading.Thread.Sleep(5000);        
  Response.Write("script>document.getElementById('loading').style.display='none';</script>");