進度條與遮罩層
- nprogress插件的使用
- ajax的6個全局事件
nprogress進度條插件
nprogress插件是一個適用於ajax應用的輕量級的進度條插件。
參考文檔：http://blog.csdn.net/joyhen/article/details/24458427
使用步驟
- 引入js文件和css文件
<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>
- 使用進度條插件
//引入了nprogress.js文件后，就有了一個全局對象NProgress對象
//開啟進度條
NProgress.start();
//關閉進度條
NProgress.done();
// 配置禁用小圓環
NProgress.configure({ showSpinner: false });
使用場景
- 添加到你調用 Ajax 的地方！綁定它到 jQuery
ajaxStart和ajaxStop事件上
JQ中AJAX的全局事件
ajax提供了6個全局函數，會被頁面中所有的ajax請求觸發，在不同時間點會觸發不同的全局事件。
在頁面中會有很多的ajax請求，但是這些ajax請求都有相同的消息機制，比如我們需要在ajax請求發送之前彈出了一個提示框，提示"正在讀取數據...." 在ajax請求成功時顯示"獲取數據成功...",在ajax結束后隱藏提示框。如果不使用全局事件，那么需要在每一個ajax的beforeSend、success、complete回調函數中都加上相同的代碼。
- jquery的全局事件需要給document注冊（固定寫法）
$(document).ajaxStart(function () {
console.log("ajaxStart在開始一個ajax請求時觸發");
});
- 全局事件的執行時機
1. ajaxStart在開始一個ajax請求時觸發
//beforeSend回調函數
2. ajaxSend在beforeSend回調函數之后觸發
//success回調函數
3. ajaxSuccess在success回調函數之后觸發
//error
4. ajaxError在error回調函數之后觸發
//complete
5. ajaxComplete在complete回調函數之后觸發
6. ajaxStop在ajax請求結束時觸發