I_7

[noopn]

页面加载进度条的实现

以NProgress为例：

主要暴露的主要是上面的几个方法，插件并不涉及对页面加载状态或请求状态的判断，只作为页面的显示效果。
start: 显示进度条，并加载。
set:设置到某个进度 范围[0,1],
inc: 增加一点进度，一个小范围的随机值
done: 完成加载并取消滚动条

下面说一下如果判断加载进度：

页面加载

document.onreadystatechange =function(){
  // 开始进度条加载
  NProgress.start();
  // 表示交互状态，页面加载中
  if(document.readyState==='interactive'){
    //NProgress.set(.5); 设置为50%
  }
  // 页面加载完成
  if(document.readyState==='complete'){
    //NProgress.done(); 加载完成
  }
}

AJAX 请求

通过readyState 状态值判断 [0,1,2,3,4] ,详情见这里
如果支持ProgressEvent 通过event返回值可以计算出进度值。