亲宝软件园·资讯

展开

网站还没加载完成时,显示正在加载的画面

司徒炼 人气: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 %>

正在玩命加载

```

加载全部内容

相关教程
猜你喜欢
用户评论