페이지로드 중 애니메이션로드 중 표시

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; 
} 

자바 스크립트 :

<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