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

【问题标题】：Showing Loading Animation While Page Is Loading在页面加载时显示加载动画
【发布时间】：2012-03-22 19:56:00
【问题描述】：

我正在尝试在我的页面上放置加载动画，但以前从未这样做过，也不知道从哪里开始。我有一个 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>

【问题讨论】：

我通常会在用户单击链接时显示加载图像。它会在新页面加载时消失。在用户单击另一个链接之前，您不需要在新页面上显示加载图像。
@JohnnyCraig 感谢您的回复。但是，您会将图像放在我的母版页中的什么位置？还是在每个单独的页面内？
我将它放在包含我的页眉和页脚的母版页中。但我使用 PHP，我对 asp 不太熟悉

标签： jquery asp.net

【解决方案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>

【讨论】：

嘿，谢谢你的回答。我把它放在母版页中吗？还是每个单独的页面？
另外，我将您的代码放在我的代码中，它只是一遍又一遍地播放图像，从不显示页面的其余部分？
在母版页内是可以的。这将为所有页面设置加载器扩展 Master
$('#loadingImage').hide(); 被调用了吗？尝试从 #loading 样式中删除 width: 100%;height: 100%;
当我删除宽度和高度时，我可以看到加载 gif 后面的实际页面，但加载 gif 永远不会隐藏。

【解决方案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;'>

【讨论】：

【解决方案3】：

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

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

【讨论】：