Question

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

感谢。

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

Answer 2

你不需要jQuery。

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

Answer 3

为此，我使用BlockUI plugin作为jQuery。

Answer 4

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

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

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

4 个答案: