制作一个相对准确的网页加载进度条

boyanx4天前技术教程3

很多网页为了提升用户体验，都会在页面载入的时候有一个加载进度条的动画效果，以此来提升用户体验。

比较知名的进度条库有 NProgress，progressBar，progressJS 等等。使用方式也差不多，如下所示就是 NProgress 的使用方式：

NProgress.start();
NProgress.done();
NProgress.remove();

可以看到提供 start， done，remove 等方法，分别对应开始，完成和 删除进度条容器，并且提供 set 方法可以设置进度条的加载速度等。

那么，有没有办法依据页面加载的事件制作一个能较为准确表达加载进度的进度条呢？

其实是可以的。

首先来看网页加载的事件有哪些（不考虑 IE 的 DOMContentLoaded）：

document.readystatechange 事件

readystatechange 会在每次 readyState 发生变化的时候触发

readyState 有以下状态：

uninitialized - 还未开始载入

loading - 载入中

interactive - 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的资源仍在加载，文档与用户可以开始交互

complete - 载入完成

window.onload 事件

load 事件在 window，指的是网页资源已经加载完毕（包括图片、音频、脚本、插件资源以及 CSS）

所有的资源全部加载完成后会触发 window 的 load 事件。

通俗一点地说：

document.readystatechange 事件会触发多次。
当 Dom Tree 生成完毕那么 document.readyState 状态翻转为 complete
当网页所有资源加载完毕 window.onload 触发

但是由于当前页面加载时候，document.readyState 的 uninitialized 和 loading 这2个状态是无法捕获的。因为 Dom Tree 还未生成，JS 代码尚未能执行，所以能捕获的状态只有interactive 和 complete 这2个状态

此时，拥有了3个可用节点，分别是

document.readyState 的 interactive

document.readyState 的 complete

window.onload

进度条 DOM 结构

<div class="progress">
  <div></div>
</div>

进度条的默认 CSS

.abc {
  width: 100%;
  height: 10px;
}

.abc div {
  width: 0;
  height: 100%;
  background: green;
}

记得给进度条加上动画

  transition: width .5s;

js 代码如下：

document.addEventListener('readystatechange', function () {
  if(document.readyState === 'interactive') {
    document.querySelector('.progress div').style.width = '33%'
  }

  if(document.readyState === 'complete') {
    document.querySelector('.progress div').style.width = '66%'
  }
} )
window.onload = function () {
  document.querySelector('.abc div').style.width = '100%'
}

分别在 3个节点让进度条 width 涨 33% 66% 和 100%

此时就得到了一个相对准确的加载进度条

标签: css圆形进度条