作为一名web开发者，或多或少都会接触到网页加载圈这个概念。一个网站的加载速度或快或慢，而慢的网页加载速度会给用户非常差的体验，这个时候如果不给用户一点提示信息，那简直糟糕透了。因此，常见的做法，是在页面加载完成之前，给一个过渡效果。那么怎么实现这种效果呢？
如何知道网页加载完成
DOM给我们提供了这样一个方法document.onreadystatechange。当一个文档的readyState属性发生更改时，readystatechange事件会被触发。document.readyState有两个值，interactive和complete。interactive状态表示文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。complete状态则表示页面加载结束。那么我们可以在页面上写一个提示信息，当document.readyState变为complete状态就隐藏这个提示，这样就可以达到一个过渡的效果了。
文字提示效果
我们从最简单的开始，可以给用户一个文字提示，比如“Loading…”。那么代码怎么写呢？
绘制加载提示
第一步，在body中绘制加载提示。
1 | <div id="loading">Loading...</div> |
第二步，给提示内容一个居中的样式效果。在style标签中写样式
1 | #loading { |
打开该html页面，我们可以看到初步的效果。
根据状态隐藏提示
利用document.onreadystatechange方法监听页面加载状态，当document.readyState变为complete状态就隐藏加载提示。加入script标签，写入以下代码。
1 | document.onreadystatechange = () => { |
刷新html页面，我们可以看到，当页面加载完成时，提示内容自动消失了。（由于资源缓存的关系，第二次的效果不会太明显，可以清空缓存观察效果。）
图片加载效果
网上有很多加载圈的gif图片，将上述文字内容换成gif图片就可以做到。也可以使用静态图片，然后通过css3动画来做一些加载效果，如rotate旋转。
1 | #loading { |
css3自定义加载效果
其实我们可以利用CSS3自定义加载效果，把我们想要的效果通过动画做出来即可。下面我们来实现一个圆弧加载效果。只要将背景图换成box-shadow效果即可。
1 | border-radius: 50%; |
这是我做的加载圈的效果页面，请点击查看。
扫一扫下方小程序码或搜索Tusi博客，即刻阅读最新文章！
