[RESOLVED]Showing Loading Animation While Page Is Loading

Hey Friends, 

I am trying to place a Loading Animation onto my page but have never done that before and have no idea where to start. I have a MasterPage where I have a Top/Side/Body contents. I would like to have a wait animation to appear when someone clicks on
a Page Tab(Navigation) or side panel shortcuts. I don’t know if the animation needs to be placed inside a Master Page or does it have to be placed inside each individual page? Also, How do you make it load right away before everything else and hide when the
page is fully loaded? Please help as I am not much familiar with page loading animation. This is what I tried but it does not work, I have tried placing it both inside the master page and single pages but it does not do what I expected it to do… What happens
is that the code behind gets executed first and then the asp code and it doesnt even display the image at all… I have also places Thread.Sleep(4000) in my Page Load to see if the image will be displayed and it doesnt… There is nothing worng with the code
I just think I am doing this incorrectly… Thanks much all for your kind help. 

<%@ Page Title="" Language="C#" MasterPageFile="~/DefaultView.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="monitor.Dashboard.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cntSidebar" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cntBody" runat="server">
    <script src="../jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#loadingImage').hide();
        });
    </script>
    <div id="loading">
        <img id="loadingImage" alt="loadingImage" src="../App_Themes/Sugar2006/images/loading.gif"/>
    </div>
</asp:Content>

Hi

I did exactly this earlier this week.

After researching quite a bit, the following link was by far the best method I could find:

http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/

 

this thread has several methods discussed.

http://forums.asp.net/t/1142988.aspx/1

UpdateProgress control seems to be a good option.

Here is the link

http://stackoverflow.com/questions/7235722/display-a-gif-while-asp-net-page-loads

Thank you the man :) 

Basquiat

Hi

I did exactly this earlier this week.

After researching quite a bit, the following link was by far the best method I could find:

http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/

 

It works when I click something within a page but when I click on a button that redirects to another page it does not load the image… Does it need to have a <trigger> under the update panel? 

Leave a Reply