web网页加载圈之入门篇

作为一名web开发者，或多或少都会接触到网页加载圈这个概念。一个网站的加载速度或快或慢，而慢的网页加载速度会给用户非常差的体验，这个时候如果不给用户一点提示信息，那简直糟糕透了。因此，常见的做法，是在页面加载完成之前，给一个过渡效果。那么怎么实现这种效果呢？

如何知道网页加载完成

DOM给我们提供了这样一个方法document.onreadystatechange。当一个文档的readyState属性发生更改时，readystatechange事件会被触发。document.readyState有两个值，interactive和complete。interactive状态表示文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。complete状态则表示页面加载结束。那么我们可以在页面上写一个提示信息，当document.readyState变为complete状态就隐藏这个提示，这样就可以达到一个过渡的效果了。

文字提示效果

我们从最简单的开始，可以给用户一个文字提示，比如“Loading…”。那么代码怎么写呢？

绘制加载提示

第一步，在body中绘制加载提示。

<div id="loading">Loading...</div>

第二步，给提示内容一个居中的样式效果。在style标签中写样式

#loading {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
}

打开该html页面，我们可以看到初步的效果。

根据状态隐藏提示

利用document.onreadystatechange方法监听页面加载状态，当document.readyState变为complete状态就隐藏加载提示。加入script标签，写入以下代码。

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    var loadingElement = document.getElementById('loading');
    loadingElement.parentNode.removeChild(loadingElement);
  }
};

刷新html页面，我们可以看到，当页面加载完成时，提示内容自动消失了。（由于资源缓存的关系，第二次的效果不会太明显，可以清空缓存观察效果。）

图片加载效果

网上有很多加载圈的gif图片，将上述文字内容换成gif图片就可以做到。也可以使用静态图片，然后通过css3动画来做一些加载效果，如rotate旋转。

#loading {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  background: url(loading.jpg) center center no-repeat;
  background-size: 100% 100%;
  animation: rotate 1.5s ease-out infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

css3自定义加载效果

其实我们可以利用CSS3自定义加载效果，把我们想要的效果通过动画做出来即可。下面我们来实现一个圆弧加载效果。只要将背景图换成box-shadow效果即可。

border-radius: 50%;
box-shadow: 2px 0 black;
animation: rotate 1.5s ease-out infinite;

这是我做的加载圈的效果页面，请点击查看。