【功能】关于页面加载进度条百分比实现的伪方法

经常看到有项目页面打开的时候会有进度条动画显示,之前还好奇,这个是怎么判断页面加载的完成比例的。所以我一般都是写的循环loading图标,然后判断window.onload,页面加载完成后进行隐藏。今天有空网上查看了下进度条百分比的实现方法,简单而言,就是通过计时器改变进度条的位置,大到一定比例(自己设定)之后就暂停,直到页面加载完成,进度条达到100%。

当然,我在进度条变化的过程中加了一些css3的渐变transition,让动画更加流畅。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条显示功能</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .loading {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #eee;
            transition: all linear 500ms 500ms;
        }

        .wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 20px;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .box {
            position: relative;
            margin-top: 2px;
            margin-left: 3px;
            width: 194px;
            height: 16px;
            border-radius: 9px;
            overflow: hidden;
        }

        .process {
            position: absolute;
            top: 0px;
            left: -90%;
            /*控制进度条显示*/
            width: 100%;
            height: 100%;
            border-radius: 9px;
            background: green;
            transition: all linear 500ms;
        }

        .text {
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translate(-50%, 0);
        }

        img {
            max-width: 50%;
        }
    </style>
</head>

<body>
    <div class="loading">
        <div class="wrapper">
            <div class="box">
                <div class="process"></div>
            </div>
            <div class="text">正在加载...</div>
        </div>
    </div>
    <img src="http://pic1.win4000.com/wallpaper/2017-12-08/5a2a434b4dbb6.jpg" alt="">
    <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t013d4c64d55c5234de.jpg" alt="">
    <img src="http://photocdn.sohu.com/20110722/Img314235964.jpg" alt="">
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20170826/551c0d88c82141ef82272794f67f998b.jpeg" alt="">
    <img src="http://picture.ik123.com/uploads/allimg/150401/3-150401100148.jpg" alt="">
    <img src="http://p1.so.qhmsg.com/t01e0ff39fe7e1e3085.jpg" alt="">
    <img src="http://p3.so.qhmsg.com/t0182eac9274efd3f25.jpg" alt="">
    <img src="http://img.mp.itc.cn/upload/20160729/69e0b989850d41179d4cd0cd354981c7_th.png" alt="">
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20190129/545a28e235a14897a70847568959a8bf.jpeg" alt="">

    <script>
        let rateNum = 10,
            key = false,
            process = document.getElementsByClassName('process')[0],
            loading = document.getElementsByClassName('loading')[0],
            text = document.getElementsByClassName('text')[0],
            timer = setInterval(function () {
                if (rateNum < 90) {
                    rateNum += 10;
                    process.style.left = (process - 100) + '%';
                }
            }, 500)
        window.onload = function () {
            rateNum = 100;
            process.style.left = '0%';
            clearInterval(timer);
            process.addEventListener('transitionend', function (e) { // 监听css3动画的完成
                e.stopPropagation(); // 这里要阻止冒泡,否则loading捕捉到此次transitionend影响loading层对于opacity的动画捕捉
                text.innerHTML = '加载完成';
                loading.style.opacity = 0; // 这里为什么不直接设置display为none呢?这是因为css3 transition不支持display
                loading.addEventListener('transitionend', function () {
                    loading.style.display = 'none'; // 直到opacity的渐变动画完成后再将其display设置为none
                })
            })
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</body>

</html>

 

【参考文章】

页面加载进度条百分比实现的伪方法

常见的几种网页进度条

在线网站:相关loading动图icon下载

 

posted @ 2020-03-10 18:03  WANNANANANA  阅读(824)  评论(0编辑  收藏  举报