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"/>