进度条

首页 > 代码库 > 进度条

2024-11-08 17:07:39 203人阅读

关于进度条的制作，终于在慕课网找到详解，看完之后收获匪浅。总结一下大神教给我的知识。

我们通过document.onreadystatechange判断页面是否加载完。

document.onreadystatechange 页面加载状态改变时的事件

document.readyState 返回当前文档的状态

1.uninitialized-还未开始载入

2.loading -载入中

3.interactive -已加载，文档与用户可以开始交互

4.complete -载入完成

1、根据css3制作加载进度条：

根据css3制作加载进度条，通过document.onreadystatechange判断页面是否加载完，加载完毕，进度条消失。这种方法的弊端就是无法实时获取加载进度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3进度条小动画</title>
<style>
.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}
.loading .pic {width: 50px;height: 50px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;}
.loading .pic i{display: block;float: left;width: 6px;height: 50px;background: #399;margin: 0 2px;-webkit-transform: scaleY(0.4);-ms-transform: scaleY(0.4);
transform: scaleY(0.4);-webkit-animation: load 1.2s infinite;animation: load 1.2s infinite;}
@-webkit-keyframes load {
    0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)}
    20%{-webkit-transform:scaleY(1);transform:scaleY(1)}
}
@keyframes load {
    0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)}
    20%{-webkit-transform:scaleY(1);transform:scaleY(1)}
}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s}
.loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
.loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
.loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s}
</style>
</head>
<body>

<div class="loading">
    <div class="pic">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>

<img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
<img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">

<script src="../js/jquery.js"></script>
<script>
    $(function () {
        document.onreadystatechange = function () {
            if (document.readyState == "complete") {
                $(".loading").fadeOut();
            }
        }
    });
</script>
</body>
</html>

2.定位在头部的进度条

在每个区域后面加script，从最初的0%一直显示到100%，完全是按照自上到下的加载顺序来实现这种效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位在头部的进度条</title>
<style>
.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}
.loading .pic {width: 0%;height: 5px;position: absolute;top: 0;bottom: 0;background: #f33}
</style>
<script src="../js/jquery.js"></script>

</head>
<body>
<div class="loading">
    <div class="pic"></div>
</div>
<header>
    <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
</header>
<script>
    $(‘.loading .pic‘).animate({width:"10%"},100);
</script>
<section class="banner">
    <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
</section>
<script>
    $(‘.loading .pic‘).animate({width:"30%"},100);
</script>
<section class="about">
    <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
</section>
<script>
    $(‘.loading .pic‘).animate({width:"50%"},100);
</script>
<section class="pro">
    <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
</section>
<script>
    $(‘.loading .pic‘).animate({width:"70%"},100);
</script>
<section class="news">
    <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
</section>
<script>
    $(‘.loading .pic‘).animate({width:"90%"},100);
</script>
<footer>
    <img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
    <img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
</footer>
<script>
    $(‘.loading .pic‘).animate({width:"100%"},100,function () {
        $(‘.loading‘).fadeOut();
    });
</script>
</body>
</html>

3.实时获取加载数据的进度条

通过获取页面所有的图片，实时获取加载进度百分比，为保证兼容性，src一定要写在onload的后面，否则程序会在IE7出错。为保证流畅性，在onload事件内部先把onload事件置为null。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时获取加载数据的进度条</title>
<style>
*{margin: 0;padding: 0}
.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}
.loading .pic {width: 100px;height: 100px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px}
.loading .pic span{display: block;width:80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 1s infinite linear}
@keyframes rotate {
   0%{transform: rotate(0deg);}
   100%{transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
   0%{-webkit-transform: rotate(0deg);}
   100%{-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="loading">
    <div class="pic">
        <span></span>
        <b>0%</b>
    </div>
</div>
<img src="http://s1.sinaimg.cn/mw690/001meHc5zy74TFKrPPyf0&690" alt="">
<img src="http://img5.imgtn.bdimg.com/it/u=4043633446,3550102679&fm=200&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=1059486618,1562064036&fm=26&gp=0.jpg" alt="">
<img src="http://img5.imgtn.bdimg.com/it/u=3058668829,3584059364&fm=26&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=1870203556,2400775406&fm=200&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=3345613708,3746168634&fm=200&gp=0.jpg" alt="">
<img src="http://img5.imgtn.bdimg.com/it/u=3336150276,669541811&fm=26&gp=0.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=4000700326,1190583608&fm=26&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=2010293466,2543411560&fm=200&gp=0.jpg" alt="">
<script src="../js/jquery.js"></script>
<script>
    $(function () {
        var img=$("img");
        var num = 0;
        img.each(function (i) {
            var oImg = new Image();
            oImg.onload=function () {
                oImg.onload=null;
              num++;
              $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
              if(num>=i){
                  $(".loading").fadeOut();
              }
            };
            oImg.src = img[i].src;
        })
    });
</script>
</body>
</html>

慕课网关于进度条部分的观看地址：http://www.imooc.com/learn/858。老师的声音像播报员，很好听，哈哈哈。

进度条

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 进度条

进度条

看完仍有疑问？有类似问题直接问程序猿