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

最新推荐文章于 2024-10-11 15:18:08 发布

cloudlll

最新推荐文章于 2024-10-11 15:18:08 发布

阅读量6.5k

点赞数 1

分类专栏： html 网页 loading 加载动画文章标签： html stylesheet function image css div

本文链接：https://blog.csdn.net/cloudlll/article/details/7334547

版权

网页同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

第一步  
在页面中加入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"/>