如何显示使用jQuery页面加载时的动画图像

问题描述：

我有一个ASP.NET页面，需要很长的时间来加载，由于多个用户控件的加载。有没有办法在那里我可以告诉使用jQuery加载动画，而页面加载？

I have an ASP.NET page that takes a long time to load due to the loading of multiple user controls. Is there a way where I can show a loading animation using jQuery while the page is loading?

感谢。

答

只需插入一个div绝对位置和样式它，只要你想，当加载页面时将其隐藏。

simply insert a div as absolute position and style it as you want , when page is loaded hide it ..

<!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页面加载时的动画图像

相关推荐