HTML页面加载和请求发送时LOADING动画
来源:互联网 发布:世界贸易组织数据 编辑:程序博客网 时间:2024/05/02 02:26
第一步 在页面中加入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"/>