一般前端项目部署到服务器之后，用户首次加载需要下载大量的静态资源，等加载了相应的资源之后才会显示真实的页面，这中间的过程，就会容易我们常说的“白屏”，为了解决白屏，我们通常的做饭就是尽量减少包的大小、按需加载、首页加载尽可能简单等；但在这之前，还是有一段时间是页面的“空白”时间。针对这个问题，可以先在页面预加载一个小动画提升用户体验。
思路主要是在模板文件手写一段动画，在vue/react完成对应的虚拟dom转化并插入之前渲染该动画以达到目的。
- css
首先在模板文件index.html或document.ejs的head标签中添加css内容
<style>
.preloadLoading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@-webkit-keyframes square-animation {
0% {
left: 0;
top: 0;
}
10.5% {
left: 0;
top: 0;
}
12.5% {
left: 32px;
top: 0;
}
23% {
left: 32px;
top: 0;
}
25% {
left: 64px;
top: 0;
}
35.5% {
left: 64px;
top: 0;
}
37.5% {
left: 64px;
top: 32px;
}
48% {
left: 64px;
top: 32px;
}
50% {
left: 32px;
top: 32px;
}
60.5% {
left: 32px;
top: 32px;
}
62.5% {
left: 32px;
top: 64px;
}
73% {
left: 32px;
top: 64px;
}
75% {
left: 0;
top: 64px;
}
85.5% {
left: 0;
top: 64px;
}
87.5% {
left: 0;
top: 32px;
}
98% {
left: 0;
top: 32px;
}
100% {
left: 0;
top: 0;
}
}
@keyframes square-animation {
0% {
left: 0;
top: 0;
}
10.5% {
left: 0;
top: 0;
}
12.5% {
left: 32px;
top: 0;
}
23% {
left: 32px;
top: 0;
}
25% {
left: 64px;
top: 0;
}
35.5% {
left: 64px;
top: 0;
}
37.5% {
left: 64px;
top: 32px;
}
48% {
left: 64px;
top: 32px;
}
50% {
left: 32px;
top: 32px;
}
60.5% {
left: 32px;
top: 32px;
}
62.5% {
left: 32px;
top: 64px;
}
73% {
left: 32px;
top: 64px;
}
75% {
left: 0;
top: 64px;
}
85.5% {
left: 0;
top: 64px;
}
87.5% {
left: 0;
top: 32px;
}
98% {
left: 0;
top: 32px;
}
100% {
left: 0;
top: 0;
}
}
@-webkit-keyframes hue-rotate {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes hue-rotate {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
.loading {
position: relative;
width: 96px;
height: 96px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: hue-rotate 10s linear infinite both;
animation: hue-rotate 10s linear infinite both;
}
.loading__square {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
margin: 2px;
border-radius: 2px;
background: #07a;
background-image: -webkit-linear-gradient(45deg, #fa0 40%, #0c9 60%);
background-image: linear-gradient(45deg, #fa0 40%, #0c9 60%);
background-image: -moz-linear-gradient(#fa0, #fa0);
background-size: cover;
background-position: center;
background-attachment: fixed;
-webkit-animation: square-animation 10s ease-in-out infinite both;
animation: square-animation 10s ease-in-out infinite both;
}
.loading__square:nth-of-type(0) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.loading__square:nth-of-type(1) {
-webkit-animation-delay: -1.42857s;
animation-delay: -1.42857s;
}
.loading__square:nth-of-type(2) {
-webkit-animation-delay: -2.85714s;
animation-delay: -2.85714s;
}
.loading__square:nth-of-type(3) {
-webkit-animation-delay: -4.28571s;
animation-delay: -4.28571s;
}
.loading__square:nth-of-type(4) {
-webkit-animation-delay: -5.71429s;
animation-delay: -5.71429s;
}
.loading__square:nth-of-type(5) {
-webkit-animation-delay: -7.14286s;
animation-delay: -7.14286s;
}
.loading__square:nth-of-type(6) {
-webkit-animation-delay: -8.57143s;
animation-delay: -8.57143s;
}
.loading__square:nth-of-type(7) {
-webkit-animation-delay: -10s;
animation-delay: -10s;
}
</style>
- 然后在
app中添加dom
<div id="root">
<div class="preloadLoading">
<div class='loading'>
<div class='loading__square'></div>
<div class='loading__square'></div>
<div class='loading__square'></div>
<div class='loading__square'></div>
<div class='loading__square'></div>
<div class='loading__square'></div>
<div class='loading__square'></div>
</div>
</div>
</div>
-
成果
