显示正在加载页面时加载动画

Question

我想将加载动画放到我的页面上，但从未做过此操作，并且不知道从哪里开始。我有一个MasterPage，我有一个Top/Side/Body内容。当有人点击页面标签（导航）或侧面板快捷方式时，我想要等待动画显示。我不知道动画是否需要放在主页面中，还是必须放在每个单独的页面中？另外，如何让它在一切之前立即加载并在页面完全加载时隐藏？请帮忙，因为我对页面加载动画不太熟悉。这是我试过，但它不工作，我已经把这个代码的页面里面不是一个母版页：

<%@ 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"> 
     $(document).ready(function() { 
      $('#loadingImage').hide();    
     }); 
    </script> 
    <asp:Image ID="loadingImage" runat="server" ImageUrl="~/App_Themes/Sugar2006/images/loading.gif" /> 
    <div id="loading">Page Has Loaded :)</div> 

</asp:Content> 

Answer 1

HTML：

<div id="loading"> 
    <asp:Image ID="loadingImage" runat="server" ImageUrl="~/App_Themes/Sugar2006/images/loading.gif" /> 
</div> 

风格：

#loading { 
/*width: 100%;*/ 
/*height: 100%;*/ 
top: 0px; 
left: 0px; 
position: fixed; 
display: block; 
opacity: 0.7; 
background-color: #fff; 
z-index: 99; 
text-align: center; 
} 

#loadingImage { 
position: absolute; 
top: 100px; 
left: 240px; 
z-index: 100; 
} 

的JavaScript：

<script src="../jquery-1.7.js" type="text/javascript"/> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('#loadingImage').hide(); 
    $('#loading').html("The page has been loaded");    
    }); 
    </script> 

Answer 2

我通常显示加载图片，当用户点击该链接。它会在新页面加载时消失。您不需要在新页面上显示加载图像，直到用户单击另一个链接。

<script src="../jquery-1.7.js" type="text/javascript"> 

<script type='text/javascript'> 
    $('a').click(function(){ 
     $('#image').show(); 
    }); 
</script> 

<img id='image' style='display:none;'> 

Answer 3

以下链接为我做。简而言之：

http://www.nullskull.com/a/764/aspnet-animated-gifs-and-long-running-processes.aspx