Page loading picture

Question

I'm making an ASP.NET Web page that generates pages from SQL when they're not cached. Their loading time could be between 300ms to 1.5seconds (No fix you database replies please).

I personally find these values to be too long, and was looking for a solution that allows me to inform the user that the page he is visiting will require a bit of time to load.

I was looking for a solution that could be via the Page_Load function, if that's possible. The perfect solution for me in this case is showing the user either an animated GIF or text saying the page is being generated.

On a side note I come from programming mostly Windows applications.

Answer 1

You're going to want to first output the loading graphic and then flush the output buffer so the content so far is sent to the user's browser by using Response.Flush().

When you output the rest of the content, you will need to have a bit of javascript in there to remove the first page elements sent so the loading graphic goes away.

Answer 2

You can start rendering the page, and flush the buffer calling Response.Flush(). Which will send the contents of the buffer to the browser. You will then need to turn off the graphic once its loaded.

Another option would be to use AJAX to load the images, so you load the entire page, without the images, and then iniate another request to get the images. This might be easier then trying to render a partial page.

1.5 seconds isn't bad for a page to load you sure this is worth your time and effort?

Answer 3

Here is an example of how to use the Response object to flush content to the browser and continue processing:

using System;
using System.Web.UI;
using System.Threading;

public partial class _Default : Page
{
    protected override void OnLoad(EventArgs e)
    {
     base.OnLoad(e);

     Response.Write("<h1>please wait...</h1>");
     Response.Flush();

        // simulate load time
     Thread.Sleep(2000);

     Response.Write("<h1>finished</h1>");
    }
}