display a gif while asp.net page loads

Question

I have a lenghty ASP.NET page load process.

Is there a way to display a loading gif while the ASP.NET page loads?

Obviously I can't use an image on the page itself, and when I fiirst load a "dummy page" with the "Loading..." picture, that page is discarded as soon as I redirect the user to the real page...

Any clue? Thanks

Answer 1

You can use an UpdateProgress control for this, like this:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>  

Here are some styles you can use if you want it to be semi-transparent:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}

Answer 2

Please see my similiar question "Please Wait" message using jQuery or AJAX?:

While the ASPX page loads, you will stay on the current page in the web browser. So when you know the new page is loading (i.e., when a button or link is pressed), simply show the "Loading" image and it will automatically disappear when the client is finished receiving the "new" page (whether it be an actual new page or the same page posted back).

Example code you can use to automatically show your loading image (contained in a div) when a submit button is clicked is the following:

$(':submit').click(function() {
    $('#divLoading').show();
});

Alternatively, you can use the UpdatePanel that comes in the Ajax Toolkit or in ASP.NET 4.0. It has a control called UpdateProgress that displays a loading image automatically.

EDIT:

I think you mean you want to show a "Loading" image before your first page is even loaded, in which case you should put your master page content wrapped around an UpdatePanel, use a progress loader control that automatically shows an image (both available in the Ajax Toolkit or ASP.NET 4.0), and load the substantial (non-master page) content of your page after your initial page load in the UpdatePanel.

You can do this by putting the body of your content page inside a Panel, setting the panel's visibility to False, and then setting it to True after the page loads.

Markup for an UpdateProgress control is as follows. You would, of course, want to style it and position it in the right area.

<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
    <ProgressTemplate>
        <div id="theprogress">
            <img src="images/loading.gif" />
            <span>Loading</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

EDIT:

If you don't want to use the UpdatePanel and UpdateProgress controls, then simply do the following:

1. Put your page content in a Panel called pnlContent and set the panel's visibility to False.
2. Create an img and your loading image and put it in a separate Panel called pnlLoading with the visility set to True.

3. Put a client-side script that forces the page to reload as soon as it loads. Put this script inside pnlLoading. Update: Put the #3 code below in your ASPX page to create your panel and it will trigger a post back immediately.

4. Add the following #4 code to your Page_Load.

Code:

For #3:

<asp:Panel runat="server" ID="pnlLoading">
    <!-- Replace "form1" with your form's name. -->
    <script type="text/javascript">form1.submit()</script>
    <img src="images/loading.gif" alt="Loading" />
    <span>Loading</span>
</asp:Panel>

For #4:

if (Page.IsPostBack())
{
    pnlLoading.Visible = false;
    pnlContent.Visible = true;
}

That will cause a loading image to show while your actual page content is being loaded.