How do i show a simple loading message on the screen while my page fetches data from server?

Question

How do i display a simple loading message on a masked screen while my webpage loads.

I have a product comparison page which gets called with a button click. Now the comparison page takes approx 4 secs to load. This is because the Stored Procedure take about 3.5 secs to return a result.

So for these 4 secs after the user clicks the button we see the previous screen with only the spinner on the tag to indicate that the page is being redirected. Is there any way i can show a page mask where the current page is blacked out before the next page is loaded..

The way i redirect to the compare page is a c# function

protected void redirect_comparepage(object sender, EventArgs e)
{
    Response.Redirect("~/ProductComparison.aspx", false);
}

I tried to do the following on the comparison page however it does not work.

How to display a loading screen while site content loads Any suggestions?

'however it does not work' - what do you mean exactly? post some code to show what you have so far. Have you had a look at the stored procedure to see if its performance can be improved? Better to fix the cause rather than the symptom IMHO. — markpsmith, Feb 20 '15 at 14:35
Well, the performance of the SP cannot be improved much further> i dont want to get into that but just take it from me that we cant improvise it much further right now without changing the Db structure... — MarsOne, Feb 20 '15 at 14:43

m-albert · Accepted Answer · 2015-09-16T20:56:30.110

How about something like this? I used a little jQuery.

Add an OnClientClick to your button control to start the magic...

<asp:Button runat="server" ID="SubmitButton" Text="Submit" 
OnClientClick="pleaseWait();" />

Include these new HTML elements to dim the screen and place a "PLEASE WAIT" in the middle of it. Make sure that the z-indexes used in these elements are higher than anything else on your page. 1000 & 1001 should do nicely...

<div id="modal" class="modal" style="background-color:rgba(64,64,64,0.5);width:100%;height:100%;z-index:1000;display:none">
</div>
<div id="wait" class="modal" style="width:300px;height:200px;margin:100px auto 0 auto;display:none;background-color:#fff;z-index:1001;text-align:center;">
    PLEASE WAIT...
</div>

Here is the OnClientClick function. It just uses JQuery to make the HTML elements appear...

function pleaseWait(){
    $(".modal").show();
    return true; // Can't remember if this is needed; but it won't hurt.
}

So when you click the button that starts the long data-process, the page will dim and a "PLEASE WAIT" appears in the middle until it refreshes.

If you aren't using or don't want to use jQuery, your pleaseWait() function would look something like this...

function pleaseWait(){
    document.getElementById("modal").style.display = "block";
    document.getElementById("wait").style.display = "block";
    return true; // Can't remember if this is needed; but it won't hurt.
}

score 1 · Answer 2 · answered Feb 20 '15 at 14:57

you can use use multithreading for this.

private void ThreadCall(){
            Thread thread = new Thread(new ThreadStart(FetchData));
            thread.Start();
        }
        private void FetchData(){
            //your code here
        }

put your fetching code in FetchData() and just call ThreadCall() from your main function..

it could have been given a better answer if you provide code and more information about your problem ..

How do i show a simple loading message on the screen while my page fetches data from server?

2 Answers2