nprogress进度条插件使用 - 好文

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

使用步骤:

* 引入js文件和css文件 <link rel='stylesheet' href='nprogress.css'/> <script
src='nprogress.js'></script>
*
使用进度条插件
引入了nprogress.js文件后，就有了一个全局对象NProgress对象
//开启进度条
NProgress.start();
//关闭进度条
NProgress.done();

使用场景: 添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上
当ajax请求开始的时候,显示进度条当ajax请求结束的时候,隐藏进度条写在公共js文件common.js中(别忘记引入html中)
$(document).ajaxStart(function(){ //console.log('ajax开始发送了') //开启进度条
NProgress.start() }) $(document).ajaxStop(function(){ //
console.log('ajax发送结束') setTimeout(function(){ // 关闭进度条 NProgress.done() },500)
})
jquery中ajax的全局事件:
jquery的ajax全局事件, 会在任意一个ajax请求执行的时候触发
ajax提供了6个全局事件函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。
在页面中会有很多的ajax请求，但是这些ajax请求都有相同的消息机制，比如我们需要在ajax请求发送之前弹出了一个提示框，提示"正在读取数据...."
在ajax请求成功时显示"获取数据成功...",在ajax结束后隐藏提示框。如果不使用全局事件，那么需要在每一个ajax的beforeSend、success、complete回调函数中都加上相同的代码。
jquery的全局事件需要给document注册（固定写法） $(document).ajaxStart(function () {
console.log("ajaxStart在开始一个ajax请求时触发") }) 全局事件的执行时机 // 6个全局事件函数 1.
ajaxStart在开始一个ajax请求时触发 (开始进度条) 2. beforeSend回调函数 ajaxSend在beforeSend回调函数之后触发
3. success回调函数 ajaxSuccess在success回调函数之后触发 4. error ajaxError在error回调函数之后触发 5.
complete ajaxComplete在complete回调函数之后触发 6. ajaxStop在ajax请求结束时触发 (结束进度条)

热门工具换一换