1、document.onreadystatechange
该事件读 document.readyState 字符串
{ loading: 0, interactive: 50, complete: 100}
分别给出写死的进度值
2、如果支持 ProgressEvent 事件
监听 progress 事件 evt.loaded / evt.total 得出进度
3、onreadystatechange 事件
读取 readyState 字符串
{‘0’: 100, ‘3’:50, ‘4’:100}
分别给出写死的进度值
然后覆盖
window.XMLHttpRequest
window.XDomainRequest
window.WebSocket
方法
变为包装方法
内部调用原始方法
外层加入调用这些发方法时候监听进度
得到值进行动画等处理
使用方法引入Pace.js以及主题文件即可:
<head>
<script src="/pace/pace"></script>
<link href="/pace/themes/pace-theme-barber" rel="external nofollow" rel="stylesheet" />
</head>
方法/步骤访问Pace.js官方网站,如下图所示。
2
点击下载Pace.js Javascript,如下图所示。
3
选择Pace.js 颜色,如下图所示。