网页进度条加载制作专题

最新推荐文章于 2024-07-19 15:32:49 发布

胡鹤婷

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量330

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/hhthwx/article/details/78739594

版权

js 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

本文介绍如何制作网页进度条，包括通过定时器控制、监听页面加载状态事件以及利用CSS3动画实现。重点讲解了如何根据页面加载进度实时更新进度条，提供了一种增强用户体验的方法。

摘要由CSDN通过智能技术生成

定时器控制

在等待页面加载的过程中，我们可以添加定时器来控制等待页面消失，加载的页面显示的这种方法来实现进度条（但实际上这种方法与真正页面加载的进度并没有关系，只是一种假性遮盖的方法）
代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器的进度条</title>
    <style>
        .loading{
            width: 100%;
            height:100%;
            position: fixed;
            top:0;
            left:0;
            z-index: 100;
            background-color:white;
        }
        .loading .pic{
            width: 64px;
            height: 64px;
            background: url(./images/loading.gif);
            background-repeat: no-repeat;
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right: 0;
            margin:auto;

        }
    </style>
    <script src="./js/jquery-3.2.1%20(2).js"></script>
    <script>
        $(function () {
            setInterval(function () {
                $(".loading").fadeOut();
            },3000)

        })
    </script>
</head>
<body>
//利用loading这个盒子将页面遮盖住，当达到定时器定时的事件，使盒子隐藏，显示页面
<div class="loading">

    <div class="pic"></div>
</div>
<img src="http://img2.imgtn.bdimg.com/it/u=4107065136,1091952618&fm=27&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">
</body>
</html>

我们也可以利用jquery方法将盒子添加到页面中去：

<script>
        $(function () {
            var loading = '<div class="loading"><div class="pic"></div></div>';
            $("body").append(loading);
            setInterval(function () {
                $(".loading").fadeOut();
            },3000)

        })
    </script>

这种方法13虽然简单易行，但是缺点很明显，当我们加载的内容在本地已经有缓存了，加载速度很快，但是我们却依然使用定时器定死了显示页面的时间，这种方法造成用户的体验肯定是不好的。

通过加载状态事件制作进度条

我们要利用以下两个事件来制作进度条：
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档的状态
当我们向服务器端发送请求时，我们可以通过document.readyState的四个状态来完成对加载进度的监测
1.uninitialized -还未开始载入
2.loading -载入中
3.interactive -已经加载，文档与用户可以开始交互
4.complete -载入完成
当readyState显示是complete状态的时候，表示页面已经加载完毕
简单实现版：

<body>
<div class="loading"><div class="pic"></div></div>'
<img src="http://img2.imgtn.bdimg.com/it/u=4107065136,1091952618&fm=27&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">
<script>

    document.onreadystatechange = function () {
    //当页面加载完毕之后，隐藏加载盒子
       if(document.readyState == 'complete'){
           $('.loading').fadeOut();
       }
    }

</script>
</body>

利用css3制作加载页面

 <style>
        .loading{
            width: 100%;
            height:100%;
            position: fixed;
            top:0;
            left:0;
            z-index: 100;
            background-color:white;
        }
        .loading .pic{
            width: 50px;
            height: 50px;

            background-repeat: no-repeat;
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right: 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;
        }
        .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;}
        //兼容代码

        @-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)}

        }
    </style>
    <script src="./js/jquery-3.2.1%20(2).js"></script>
</head>
<body>
<div class="loading">
    <div class="pic">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>

    </div>
</div>
<img src="http://img2.imgtn.bdimg.com/it/u=4107065136,1091952618&fm=27&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">
<script>
    document.onreadystatechange = function () {
        if(document.readyState == "complete"){
//            alert(1);
            $(".loading").fadeOut();
        }
    }
</script>

效果图是每个i轮流由当前长度加载到长度为1
这里写图片描述

根据页面加载的进度实时呈现数据的进度条

 <style>
        *{
            padding:0;
            mrgin:0;
        }
        .loading{
            width: 100%;
            height:100%;
            position: fixed;
            top:0;
            left:0;
            z-index: 100;
            background-color:white;
        }
        .loading .pic{
            width: 100px;
            height: 100px;

            /*background-color: #FF3333;*/
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;

            font-size: 25px;
            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 #666;
            -webkit-animation: rotate 1s infinite linear;
            animation: rotate 1s infinite linear;
        }
        @-webkit-keyframes rotate {
            0%{-webkit-transform: rotate(0deg);transform: rotate(0deg); }
            100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}

        }
        @keyframes rotate {
            0%{-webkit-transform: rotate(0deg);transform: rotate(0deg); }
            100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}

        }
    </style>
    <script src="./js/jquery-3.2.1%20(2).js"></script>

</head>
<body>
<div class="loading">
    <div class="pic">
        <span></span>
        <b>0%</b>
    </div>
</div>
<header>
    <img src="http://img2.imgtn.bdimg.com/it/u=4107065136,1091952618&fm=27&gp=0.jpg" alt="">
    <img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">

</header>

<section class="about">
    <img src="http://img2.imgtn.bdimg.com/it/u=4107065136,1091952618&fm=27&gp=0.jpg" alt="">

</section>

<section class="pro">
    <img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">
</section>

<section class="news">
    <img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">
</section>

<footer>
    <img src="http://img3.imgtn.bdimg.com/it/u=2336784136,2278851765&fm=200&gp=0.jpg" alt="">
</footer>
<script>
    $(function(){
        var img = $("img");
        var num = 0;
        var length = img.length;
        img.each(function (i) {

            var oImg = new Image();
            oImg.onload = function () {
                //里面存在bug ,存在一些动图，由于图片本身比较大，可能会多次请求服务器，但是实际上只有一张图片
                oImg.onload = null;
                num++;
                $(".loading b").html(parseInt(num/length*100)+"%");
                if(num == length){
                    $(".loading").fadeOut();
                }
            }
            oImg.src = img[i].src;
        })
    })
</script>