js获取页面加载过程做一个简单的loading

最新推荐文章于 2024-05-17 03:22:47 发布

sunshine-huang

最新推荐文章于 2024-05-17 03:22:47 发布

阅读量8.8k

点赞数 2

分类专栏： js css

本文链接：https://blog.csdn.net/u011108439/article/details/51008214

版权

js 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

前几天写了一个简单的，还是觉得稍微改得像一点

document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法.  
        function loadingChange()   
        {   
            if(document.readyState == "complete"){//当页面加载状态为完全结束时进入   
                $(".process .cs").animate({width:"100%"},function(){
                     $(".loading").hide();//当页面加载完成后将loading页隐藏  
                     $('.wrap').show();
                });
            }   
        }

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <title>loading……demo</title>  
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
<script type="text/javascript" src="js/jquery.js"></script>
</head>  
<body>  
    <div class="wrap" style="display: none;">  
        <section class="home">
           
        </section>  
    </div>  
    <div class="loading">  
         <div class="process">
             <div class="cs"></div>
         </div>
    </div> 
</body>  
</html>

*{padding: 0; margin:0;}  
    html{font-size: 40px;}  
    body, html{width: 100%; height: 100%;}  
    .wrap{ position: relative; width:100%; height:100%;}  
    .home{width: 100%; height:100%; background: url(bg.jpg) no-repeat; background-size: 100% 100%;}  
    .loading{position: absolute; width: 100%; height: 100%; background: #fff; z-index: 99;}  
    .loading p{position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); text-align: center; color: #222; font-size:0.8rem;}
   .loading .process{ position: absolute;
        top: 50%; left: 50%; -webkit-transform:translate(-50%,-50%);
        width: 90%; height: 30px;
        border-radius: 3px;
        border: 1px solid #ccc;
        background: #fff;
        overflow: hidden;
    }
     .loading .process .cs{background: #899; width:0%; height: 100%;}

sunshine-huang

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js获取页面加载过程做一个简单的loading

前几天写了一个简单的，还是觉得改善一下document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. function loadingChange() { if(document.readyState == "complete"){//当页面加载状态为完全
复制链接

扫一扫

专栏目录