nprogress.js进度条插件的使用

nprogress插件是一个适用于ajax应用的轻量级的进度条插件。

http://ricostacruz.com/nprogress/

https://github.com/rstacruz/nprogress

使用步骤

1 引入js文件和css文件

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

2 使用进度条插件

//引入了nprogress.js文件后，就有了一个全局对象NProgress对象
//开启进度条
NProgress.start();
//关闭进度条
NProgress.done();

3 使用场景

　　添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上

　　ajax提供了6个全局函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。

4 jquery的全局事件需要给document注册（固定写法）

$(document)
    .ajaxStart(function () {
        NProgress.start()
    })
    .ajaxStop(function () {
        NProgress.done()
    })

5 全局事件的执行时机

　　1) ajaxStart在开始一个ajax请求时触发

　　//beforeSend回调函数
　　2) ajaxSend在beforeSend回调函数之后触发

　　//success回调函数
　　3) ajaxSuccess在success回调函数之后触发

　　//error
　　4) ajaxError在error回调函数之后触发

　　//complete
　　5) ajaxComplete在complete回调函数之后触发

　　6) ajaxStop在ajax请求结束时触发

参考文档：http://blog.csdn.net/joyhen/article/details/24458427