Jquery 中当一个 Ajax 请求启动时，并且没有其他未完成的 Ajax 请求时，将调用 ajaxStart() 方法。同样，ajaxStop() 方法则是在所有 Ajax 请求都完成时调用。这些方法的参数都是一个函数，这个函数将在事件发生时被调用。jquery1.9+ 版本以后，ajax 全局事件需绑定到 document 对象上才能触发。
<link rel=”stylesheet” href=”./nprogress.css”>
<style>
.loading{
display:none;
position:fixed;
background: rgba(0,0,0,.3);
text-align:center;
top:0;
bottom:0;
left:0;
right:0;
color:#fff;
font-size: 60px;
};
</style>
</head><body>
<div class=”loading”> 正在玩命加载中 …</div>
<button id=”btn”> 请求 </button>
<script src=”./jquery.js”></script>
<script src=”./nprogress.js”></script>
<script>
$(document)
.ajaxStart(function(){
// 只要有 ajx 请求发生 就会执行
$(‘.loading’).fadeIn()
NProgress.start();
// 显示加载提示
console.log(‘ 注意即将开始请求了 ’)
})
.ajaxStop(function(){
$(‘.loading’).fadeOut()
NProgress.done();
// 结束提示
console.log(“ 请求结束了 ”)
})
$(‘#btn’).on(‘click’,function(){
$.get(‘time.php’)
})
</script>