Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I_7 #7

Open
noopn opened this issue Aug 16, 2018 · 0 comments
Open

I_7 #7

noopn opened this issue Aug 16, 2018 · 0 comments

Comments

@noopn
Copy link
Owner

noopn commented Aug 16, 2018

页面加载进度条的实现

NProgress为例:
nprogess

主要暴露的主要是上面的几个方法,插件并不涉及对页面加载状态或请求状态的判断,只作为页面的显示效果。
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返回值可以计算出进度值。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant