网站还没加载完成时，显示正在加载的画面
司徒炼 人气:0
对于一些比较大的web项目来说，网站加载较长时，会出现时间长短不一的白屏，想要让用户知道，这个网页是有反应的，给个加载的画面提示，以免损失客户流量，现在以`vue`开发的项目为例。
在此之前，希望读者是有了解过vue的，最好是有用过vue的脚手架构建过项目的。
在vue项目中，只有一个html文件，我们要找的就是这个，在`vue-cli3`生成的项目中，index.html在public文件夹里。
初始化时的index.html文件是这样的
```html
<%= htmlWebpackPlugin.options.title %>
```
其中``就是整个单页面应用的入口，会在数据加载完才显示，这个时候只要在其上面写上HTML代码就可以在网站还没加载完成时，把自己写的加载动画显示出来了，在网站加载完成时，把自己写的HTML代码移除掉，所以这里需要知道如何才能知道，网站已经加载好了。
主要是利用`onreadystatechange`事件，这个稍后再说，先看下添加的h5代码与CSS样式
在``上面添加
```html
```
接下来是上面H5代码的CSS样式
```html
```
最后是js代码，这里要注意的是，这部分代码要放在``中，不能放在``中，因为只有这样，这部分代码才会在``加载完成之前执行。
```html
```
好了，主要来看这部分代码
```javascript
document.onreadystatechange = completeLoading;
function completeLoading() {
if (document.readyState == "complete") {
clearInterval(time);
time = null;
const loading = document.querySelector('#loading');
loading.remove(); //删除元素
}
}
```
`onreadystatechange`这个是ajax的一个事件。
当请求被发送到服务器时，可能有时候需要执行一些事件，每当`readyState `改变时，就会触发`onreadystatechange `事件。
`document.readyState`描述文档的加载状态，有三个值：
+ **loading / 正在加载**
+ document仍在加载
+ **interactive / 可交互**
+ 文档已被解析，"**正在加载**"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
+ **complete / 完成**
+ 文档和所有子资源已完成加载。表示 `load` 状态的事件即将被触发。
当这个属性改变时，就会触发`onreadystatechange`事件
当确定加载完成时，就可以让定时器清除定时器了，并且删除用于展示加载动画的元素了
**完整代码**
```html
<%= htmlWebpackPlugin.options.title %>
```
正在玩命加载
正在玩命加载
加载全部内容