Best method to show Loading message till an ASP.NET page loads content

Question

I have an ASP.NET web page where i have several DIV's (with runat="server") and i am showing records from DB in that.The number of records /data to be shown would be huge some times,I have put the code to load the content in div , in my Page_Load event. But when the page loads, I am seeing a blank screen for some seconds and then its showing the page content. I want to eliminate this.Instead i want to show a "Loading" message to user till the entire page content loads. What is the best way to do this ?

Some options came to my mind are

1 Response.Flush Response.Buffer

2 Remove the code to load the content in the page load event.Instead, load the content using jQuery's load/ ajax functions on document.ready

Can any one tell me the bet way to address this issue

Answer 1

You can lock UI with a nice overlay busy message.

The Mark-up part:

$(function() { // when document has loaded

    ($.unblockUI); //unlock UI

    //Show busy message on click event and disable UI
    $('#btnHelloWorld').click(function() {
    $.blockUI({ message: '<h4><img src="busy.gif" />Please wait...</h4>' });

    });

});

<asp:Button ID="btnHelloWorld" runat="server" Text="Hello World" /><br/>

The Code behind:

   Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click
        Label1.Text = "Hello World"
        Threading.Thread.Sleep(5000)
    End Sub

Check out jQuery BlockUI Plugin