顯示正在加載頁面時加載動畫

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