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