html5 css3 单页面预加载动画第3弹支持 vue

home 编辑时间 2021/04/27

![](/api/file/getImage?fileId=6087820e16199b501c022c02)
<br><br>
## 前言
学习了bilibili up主 码小渣的视频 
【HTML+CSS】8分钟实现砰砰的爱心动画，快学起来送给喜欢的人吧！
[https://www.bilibili.com/video/BV1ba4y1475n](https://www.bilibili.com/video/BV1ba4y1475n)

基于这个代码，稍加微调，既可作为网站的预加载动画

<br>
**线上预览地址**
[https://tczmh.gitee.io/loadding3/](https://tczmh.gitee.io/loadding3/)
[https://gitee.com/tczmh/loadding3](https://gitee.com/tczmh/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

<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

送人玫瑰,手留余香