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

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

<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 2

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 3

以下链接为我做了。简短而简单：

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

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

3 个答案: