如何在使用 jQuery 的页面加载期间显示动画图像答案

【问题标题】：How do I display an animated image during Page Load using jQuery如何在使用 jQuery 的页面加载期间显示动画图像
【发布时间】：2010-07-19 02:42:12
【问题描述】：

由于加载了多个用户控件，我有一个 ASP.NET 页面需要很长时间才能加载。有没有办法在页面加载时使用 jQuery 显示加载动画？

谢谢。

【问题讨论】：

标签： asp.net jquery animation load

【解决方案1】：

只需插入一个 div 作为绝对位置并根据需要设置样式，当页面加载时隐藏它..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jq.js"></script>
<style>
.boxMid{position:absolute; top:30%; left:40%; width:200px; height:200px; background-color:#fff;
               border:1px solid #333; display:block;}
#mybox{position:absolute; left:0; top:0; width:100%; height:100%; background-color:#666666; opacity:.8; display:block;filter:alpha(opacity=80);}
</style>
</head>

<body>

<div id="mybox" >
    <div class="boxMid">
     Loading, please wait ...
    </div>
</div>
    <div id="loading">loading</div>

    <script type="text/javascript">
    $(document).load(function(){
        $('#mybox').fadeOut();
    });

    </script>

</body>
</html>

【讨论】：

您好，您能详细说明一下吗？我是 jQuery 开发的新手 :( 发生的事情是图像在页面加载期间不显示，而只是在它之后显示。我需要在页面加载期间显示图像。谢谢！
我更新回放，只需添加内容和您的 jquery 路径而不是 src="jq.js"

【解决方案2】：

你不需要 jQuery。

您只需添加一个 <img> 标记即可显示动画 GIF。
你可以在AJAXLoad.info找到合适的动画GIF。

【讨论】：

【解决方案3】：

为此，我将BlockUI plugin 用于 jQuery。

【讨论】：

【解决方案4】：

   $.ajaxSetup({   
      beforeSend:function(){   
         $("#loading").show();   
      },   
      complete:function(){   
         $("#loading").hide();   
   });

这将更改您的全局 ajax 设置以在处理 ajax 时显示/隐藏 #loading 对象。

【讨论】：