Pace.js的原理是怎么样的

JavaScript017

Pace.js的原理是怎么样的,第1张

基本上是几种中方案的混合

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 颜色,如下图所示。