页面实现加载进度条_网页显示数据加载进度

作者：我家小花儿 | 2024-02-18 00:16:40

踩

网页显示数据加载进度

文章目录

一、定时器实现进度条
二、css3实现进度条
三、加载状态事件实现进度条

一、定时器实现进度条

原理：设置了固定的时间后将图片和遮罩层隐藏,显示出页面的内容

效果1：

定时器实现的进度条效果

代码实现

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

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>lmx</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #f6f6f6;
    }

    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        background: #fff;
    }

    .loading .pic {
        width: 64px;
        height: 64px;
        background: url(img/Running\ heart.gif);/** 在https://preloaders.net/选择自己喜欢的gif **/
        position: absolute;
        background-size: 100% 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    .imgs {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    img {
        flex: 1;
        width: 20%;
        height: auto;
        vertical-align: middle;
    }
</style>

<body>
    <div class='loading' id='loading'>
        <div class='pic'></div>
    </div>
    <div class="imgs">
        <img src="https://img2.baidu.com/it/u=463842799,984448752&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
            alt=""><img
            src="https://img1.baidu.com/it/u=851989706,374477030&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img0.baidu.com/it/u=819920547,2844342082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=3448354744,1362206024&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=3185636914,4082760025&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=2878460091,2929846652&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
            alt=""><img
            src="https://img0.baidu.com/it/u=4101594417,2919542589&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=2567022104,3971898384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img1.baidu.com/it/u=4131986913,2344038461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img0.baidu.com/it/u=156148580,3161347012&fm=253&fmt=auto&app=138&f=PNG?w=501&h=500.webp"
            alt="">
    </div>
</body>
<script>
/** window.onload是一个事件，就是在文档加载完成之后触发的事件，可以为这个事件添加事件处理函数 **/
    window.onload = function () {
        setTimeout(function () {
            var oLoding = document.getElementById('loading');
            oLoding.style.display = 'none';
        }, 1000);
    }
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

效果2：
在这里插入图片描述
代码实现：

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

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>lmx</title>
</head>

<style>
    #box {
        width: 0;
        height: 45px;
        background-color: hotpink;
    }
</style>

<body>
    <div id="box"></div>
    <div id="num"></div>
    <script>
        let box = document.getElementById('box') 
        let num = document.getElementById('num')  //获取dom元素
        let cliWidth = document.documentElement.clientWidth  //获取可视区域的宽度
        let boxWidth = 0 //box盒子宽度默认设置为0

        function jinDu() {
            boxWidth += 25  // 每100毫秒累加25
            if (boxWidth >= cliWidth) { // 判断当盒子的宽度大于页面可视区域的宽度时
                boxWidth = cliWidth // 为了避免宽度超出让盒子宽度等于可视区域的宽度
                clearInterval(timer) // 清除定时器
            }
            box.style.width = boxWidth + 'px'  // 宽度赋值
            num.innerText = (boxWidth / cliWidth * 100).toFixed(2) + '%' // 所占百分比赋值
        }
        let timer = setInterval(jinDu, 100)  //定时器 每100毫秒执行一次
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

二、css3实现进度条

效果：
在这里插入图片描述

代码实现：

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

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>lmx</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #loading {
        width: 100%;
        height: 100%;
        position: fixed;
    }

    #loading .pic {
        width: 90px;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 100;
    }

    #loading .pic i {
        display: block;
        width: 9px;
        height: 50px;
        float: left;
        margin: 0 2px;
        background: #00CC99;
        -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(1);
            transform: scaleY(1);
        }

        20% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }
    }

    #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;
    }

    #loading .pic i:nth-child(6) {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
</style>

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

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

三、加载状态事件实现进度条

1）document.onreadystatechange 页面加载状态改变时的事件
2）document.readyState 返回当前文档的状态

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

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>lmx</title>
</head>


<style>
    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        background: #FFF;
    }

    .loading .pic {
        width: 64px;
        height: 64px;
        background: url(img/Running\ heart.gif);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    #imgs{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    img{
        width: 20%;
        height: auto;
    }
</style>
<script src="./jQuery文件//jquery-1.12.1.min.js"></script>
<script>
    document.onreadystatechange = function () { //加载状态改变的事件
        if (document.readyState == "complete") { //当前文档加载完成
            $(".loading").fadeOut(); // fadeOut淡出，隐藏被选元素
        }
    }
</script>
</head>

<body>
    <div class="loading">
        <div class="pic">
        </div>
    </div>
    <div id="imgs">
        <img src="https://img2.baidu.com/it/u=463842799,984448752&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
        alt=""><img
        src="https://img1.baidu.com/it/u=851989706,374477030&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
        alt=""><img
        src="https://img0.baidu.com/it/u=819920547,2844342082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
        alt=""><img
        src="https://img2.baidu.com/it/u=3448354744,1362206024&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500.webp"
        alt=""><img
        src="https://img2.baidu.com/it/u=3185636914,4082760025&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp">
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/102702?site