前端小课堂-页面加载等待动画

页面加载等待动画

当页面内容比较复杂时，页面内容需要较长的加载时间，用户在页面加载时长时间等待时，加入一些动画效果可以有效提高用户体验，这次为大家带来前端页面加载等待动画的加入过程和原理，为大家提供动画库，帮助大家了解设计方式。

1.页面加载动画原理

浏览器在进行页面加载时是按照文档从上到下加载的，部分在网页前面定义的内容会首先被加载；因此，我们可以把页面加载动画相关的内容写在页面最前面，保证页面加载时首先出现，当内容全部被加载后，使动画内容隐藏

2.书写动画

首先需要把动画内容写入页面，放在页面的最前面，并且设置宽度和高度与背景颜色，使动画能够覆盖整个页面

.loader{
        position: absolute ;
        background-color: white;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .scanner span {
            color: transparent;
            font-size: 1.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -5em;
    }
    .scanner span::before {
        content: "Loading...";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-right: 4px solid #6d11a7;
        overflow: hidden;
        color: #6d11a7;
        animation: load91371 2s linear infinite;
    }

    @keyframes load91371 {
        0%, 10%, 100% {
                width: 0;
        }

        10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {
            border-right-color: transparent;
        }

        11%,21%,31%,41%,51%,61%,71%,81%,91% {
            border-right-color: #6d11a7;
        }

        60%, 80% {
            width: 100%;
        }
    }
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

    <div class="loader">
        <div class="scanner">
          <span>Loading...span>
        div>
    div>
1
2
3
4
5

3.使用js监听页面内容加载情况

使用js进行页面加载情况进行监听，当页面加载完成后，对动画进行隐藏

document.onreadystatechange=function(){
    console.log(document.readyState)
}
// 获取动画的dom
let loader = document.querySelector(".loader");
// 页面加载完成事件
window.onload = function () {
    // 加载完成，隐藏动画，显示内容
    loader.style.display = "none";
}
1
2
3
4
5
6
7
8
9
10

4.优化

完整代码如下，但是不是最优代码

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>Documenttitle>
head>
<style>
    .loader{
        position: absolute ;
        background-color: white;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .scanner span {
            color: transparent;
            font-size: 1.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -5em;
    }
    .scanner span::before {
        content: "Loading...";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-right: 4px solid #6d11a7;
        overflow: hidden;
        color: #6d11a7;
        animation: load91371 2s linear infinite;
    }

    @keyframes load91371 {
        0%, 10%, 100% {
                width: 0;
        }

        10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {
            border-right-color: transparent;
        }

        11%,21%,31%,41%,51%,61%,71%,81%,91% {
            border-right-color: #6d11a7;
        }

        60%, 80% {
            width: 100%;
        }
    }
style>
<body>
    <div class="loader">
        <div class="scanner">
          <span>Loading...span>
        div>
    div>
    <div>
        <img src="https://picsum.photos/1250/650" alt="">
    div>

    <script>
        document.onreadystatechange=function(){
            console.log(document.readyState)
        }
        // 获取动画
        let loader = document.querySelector(".loader");
        // 加载完成事件
        window.onload = function () {
            // 加载完成，隐藏动画，显示内容
            loader.style.display = "none";
        }
    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
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

完成以上两步，该效果就完成了，但是这样并不满足一般需求，如果页面存在大量需要页面最初加载的文件，导致dom加载速度不够快，那么还是需要花费很多等待时间，那么就使用js在页面最前端将.loader加入到页面最前，才能实现更好的效果。

对于js的实现还可以使用document.onreadystatechange函数进行动态追踪，实现进度条效果，详细见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readystatechange_event

最后，动画效果库推荐给大家：

https://uiverse.io/loaders

相关阅读:
TiDB深度翻译出现内存溢出问题
 计算机竞赛深度学习 YOLO 实现车牌识别算法
 PHP + Laravel + RabbitMQ + Redis 实现消息队列 (五) 异常处理（死信）、延时队列与优先队列
 ARP地址解析协议（深信服X计划）
网络字节序和主机字节序
 docker快速安装开发用各种数据库
 code编译时报错undefined reference to ...
初步认识JAVA
K-hop消息传递图神经网络的表达能力有多强？
香港科技大学广州｜机器人与自主系统学域博士招生宣讲会—同济大学专场！！！（暨全额奖学金政策）
原文地址：https://blog.csdn.net/qq_42951382/article/details/128207672