html5 css3 单页面预加载动画 第3弹 支持 vue
2021-04-27
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
<br><br>
## 前言
学习了bilibili up主 码小渣的视频
【HTML+CSS】8分钟实现砰砰的爱心动画，快学起来送给喜欢的人吧！
[https://www.bilibili.com/video/BV1ba4y1475n](https://www.bilibili.com/video/BV1ba4y1475n)
基于这个代码，稍加微调，既可作为网站的预加载动画
<br>
**线上预览地址**
[https://zzzmhcn.gitee.io/loadding3/](https://zzzmhcn.gitee.io/loadding3/)
[https://gitee.com/zzzmhcn/loadding3](https://gitee.com/zzzmhcn/loadding3)
<br>
简单解释一下原理
html加载过程比较冗长
依次是
`index.html`
`index.css`
`index.js`
`image-01.png`
`image-02.png`
...
<br>
仅有整个页面全部加载完成，用户才能开始正常访问
如果是一台廉价的云主机，带宽只有最低的1m
用户打开这个网页可能至少需要5秒以上
<br>
所以解决这个问题的思路就是
把用户当成一个 **小孩**
制作一个不那么需要占网速的 **玩具**
先塞到用户手里，吸引注意力
等 5 ~ 10 秒后页面加载完成
再收走这个 **玩具** 显示页面
**那么这个玩具就是本篇主题 预加载动画**
<br>
学习了up主码小渣的视频后
发现仅需要2kb可以实现
丰富的色彩加有趣的动画
足以吸引用户看个5秒不跑路了
## 代码
核心代码分为3个部分
**html**
```html
<!-- 这段代码建议放在Body最上面，且css文件也要放在head中 -->
<div id="loading-v3">
<div id="loading-v3-bg"></div>
<div id="loading-v3-box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
```
**css**
```css
#loading-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
z-index: 99999;
}
#loading-v3-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
background: #f6f6f6;
}
#loading-v3-box {
height: 100vh;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#loading-v3-box ul {
height: 20px;
display: flex;
list-style-type: none;
padding: 0;
margin: 0px;
}
#loading-v3-box ul li {
width: 14px;
height: 14px;
border-radius: 1rem;
margin-right: 10px;
list-style-type: none;
}
#loading-v3-box ul li:nth-child(1) {
background: #f4433c;
animation: loading-v3 3s 0s infinite;
}
#loading-v3-box ul li:nth-child(2) {
background: #ff9800;
animation: loading-v3 3s 0.2s infinite;
}
#loading-v3-box ul li:nth-child(3) {
background: #ffeb3b;
animation: loading-v3 3s 0.4s infinite;
}
#loading-v3-box ul li:nth-child(4) {
background: #64e291;
animation: loading-v3 3s 0.6s infinite;
}
#loading-v3-box ul li:nth-child(5) {
background: #2d85f0;
animation: loading-v3 3s 0.8s infinite;
}
#loading-v3-box ul li:nth-child(6) {
background: #794c74;
animation: loading-v3 3s 1s infinite;
}
@keyframes loading-v3 {
25%, 50% {
height: 60px;
transform: translateY(-30px);
}
75%, 100% {
height: 14px;
transform: translateY(-7px);
}
}
```
**js**
```javascript
// 当你的页面加载完成后，执行这段代码，自动删除加载动画的dom
document.body.removeChild(document.querySelector("#loading-v3"));
```
## 延伸
按照我之前写的2篇预加载文章，到这里也就差不多结束了
但我近期还发现预加载动画的一个妙用
就是让预加载动画支持 vue
因为 vue 打包后的文件通常能达到2mb ~ 5mb
非常恐怖 用户首次加载能急死
<br>
其实用起来也是一样的
把上文 html 中的 `<div id="loading-v3">`
放到 `public/index.html` 中
`css` 文件也引入 `index.html` 的 `head` 部分
最后在 `Layout.vue` 或 `Index.vue` 的 `mounted` 中加入类似以下代码
```javascript
methods: {
loaded() {
const loading = document.querySelector("#loading-v3");
if (loading) {
document.body.removeChild(loading);
}
}
},
mounted() {
this.loaded();
}
```
<br>
有极小的概率，会出现上述代码没有生效
导致网页加载完了，你的动画还遮罩住网站，导致bug
如果你希望万无一失，在 `index.html` 中，加入 `settimeout`
判断如果30秒后，`loading-v3` 的 dom 仍然能获取到 不是空，移除之
代码类似于
```javascript
<script>
setTimeout(function (){
const loading = document.querySelector("#loading-v3");
if (loading) {
document.body.removeChild(loading);
}
},30000)
</script>
```
# END
沪公网安备31010602005070号