ページが読み込まれている間に読み込み中のアニメーションを表示する

Question

私は自分のページに読み込みアニメーションを配置しようとしていますが、これまでに行ったことがなく、どこから起動するのか分かりません。私はTop/Side/Bodyの内容を持つMasterPageを持っています。誰かがページタブ（ナビゲーション）またはサイドパネルのショートカットをクリックしたときに表示される待機アニメーションを持っていたいと思います。アニメーションをマスターページ内に配置する必要があるかどうか、または個々のページの内側にアニメーションを配置する必要があるかどうかはわかりません。また、どのように他のものの前にすぐに読み込みを行い、ページが完全に読み込まれたときに非表示にするのですか？私はページ読み込みアニメーションに慣れていないので、助けてください。これは私が試したものですが、それは動作しません、私はページではない、マスターページ内にこのコードを配置している：

<%@ 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