HTML页面加载和请求发送时LOADING动画

第一步
在页面中加入DIV
<div id="loadingDiv">
正在加载...  <asp:Image ID="Image1" runat="server" ImageUrl="~/loading.gif">
</div>
Image1：是个GIF动画图片
第二部
编写CSS文件“Loading.css”
#loadingDiv
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
margin-top:0px;
margin-left:0px;
text-align:center;
background-image:url('Loading.png');  /*这个图片是个半透明的背景*/
z-index:99999;
}

第三部
在页面中引入CSS文件
<link rel="stylesheet" href="Loading.css" type="text/css"/>

第四步
编写JS文件“Loading.js”

// 添加事件
document.onreadystatechange = StateChangeFun;

// 页面状态发生改变时调用的函数
function StateChangeFun(){
if(document.readyState == "complete"){
document.forms[0].onsubmite = FormSubmitFun;
document.body.onresize = ReSetSizeFun;

loadingDiv.style.display = "none";

}else
{
ReSetSizeFun();
loadingDiv.style.display = "";
}
}
// 表单提交时调用
function FormSubmitFun(){
ReSetSizeFun();
loadingDiv.style.display = "";
}
// 页面大小时调用
function ReSetSizeFun(){
loadingDiv.style.top= document.documentElement.scrollTop + "px";
loadingDiv.style.left= document.documentElement.scrollLeft + "px";
}

第五步
在页面中加载JS文件
<script src="Loading.js" type="text/javascript"/>