本文记录为博客添加加载动画的过程。
简介
加载动画可以缓解用户等待页面加载的不适感，给予用户一个明确的指示，告诉他们页面正在加载中。这有助于提升用户体验，减轻用户的焦虑感，让他们 感觉 页面加载速度更快。
实现思路
- html + css 创建动画页面
- 调用 js 加载 dom 事件来控制加载动画消失
实现方法
动画照搬了一个示例 ~
动画页面
我在 bodyBegin 注入了元素代码：
1
2
3
4
5
6
7
8
9
10
| <div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
<div id="Loadanimation-center-absolute">
<div class="xccx_object" id="xccx_four"></div>
<div class="xccx_object" id="xccx_three"></div>
<div class="xccx_object" id="xccx_two"></div>
<div class="xccx_object" id="xccx_one"></div>
</div>
</div>
</div>
|
动画 CSS
css 代码：
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
| #Loadanimation{
background-color:#fff;
height:100%;
width:100%;
position:fixed;
z-index:1;
margin-top:0px;top:0px; }
#Loadanimation-center{
width:100%;
height:100%;
position:relative; }
#Loadanimation-center-absolute{
position:absolute;
left:50%;
top:50%;
height:200px;
width:200px;
margin-top:-100px;
margin-left:-100px; }
.xccx_object{
-moz-border-radius:50% 50% 50% 50%;
-webkit-border-radius:50% 50% 50% 50%;
border-radius:50% 50% 50% 50%;
position:absolute;
border-left:5px solid #87CEFA;
border-right:5px solid #FFC0CB;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
-webkit-animation:animate 2.5s infinite;
animation:animate 2.5s infinite; }
#xccx_one{
left:75px;
top:75px;
width:50px;
height:50px; }
#xccx_two{
left:65px;
top:65px;
width:70px;
height:70px;
-webkit-animation-delay:0.1s;
animation-delay:0.1s; }
#xccx_three{
left:55px;
top:55px;
width:90px;
height:90px;
-webkit-animation-delay:0.2s;animation-delay:0.2s; }
#xccx_four{
left:45px;
top:45px;
width:110px;
height:110px;
-webkit-animation-delay:0.3s;
animation-delay:0.3s; }
@-webkit-keyframes animate{50%{
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg); }
100%{-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg); } }
@keyframes animate{50%{
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg); }
100%{
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg); }
}
|
js 代码
我在 head.ejs 中添加了加载事件，没有等待元素都加载完成，可以减少被动画盖住的时间
一般还是会使用 DOMContentLoaded 事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script>
// 页面加载完成后隐藏加载动画
document.addEventListener("readystatechange", function() {
const loader = document.getElementById('Loadanimation');
if (loader) {
// 停留1秒后开始淡出
setTimeout(function() {
loader.style.transition = 'opacity 2.5s';
loader.style.opacity = '0';
// 淡出完成后隐藏
setTimeout(() => {
loader.style.display = 'none';
}, 2600); // 等待淡出动画完成
}, 700); // 停留0.8秒
}
});
</script>
|
这样就可以了 ~
优化方向
单次显示
看了几位大佬的博客，加载页面仅显示一次，虽然我们博客加载方式不同，可以尝试自己实现，已知的思路是检测用户是否从本站跳转而来：在的网页加载时，通过JavaScript检测document.referrer属性，这个属性包含了前一个文档的 URL，如果document.referrer为空或者不是你的网站的URL，那么用户可能是从其他网站跳转而来。
新内容
加入个人博客相关 LOGO，加入进度条等，有空可以加~
参考资料
文章链接：
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-loading/fluid-loading/
