👦

 

阅读数：次
NProgress

NProgress插件实现Ajax加载进度条基本功能

前导必备

  • 该插件是基于jQuery的

首先需要引入代码如下：

1
2
3
4
5
6
<!--引入nprogress的css样式库-->
<link rel="stylesheet" href="nprogress.css"/>
<!--引入jquery库-->
<script src="assets/jquery/jquery.min.js"></script>
<!--引入nprogress的js库-->
<script src="assets/nprogress/nprogress.js"></script>

在页面底部添加功能代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<script>
NProgress.configure({ showSpinner: false });  //不显示右上角加载圆圈
$(window).ajaxStart(function () {
    /*只要使用的ajax就会执行这个方法*/
    /*开启进度条*/
    NProgress.start();
});
$(window).ajaxComplete(function () {
    /*结束进度条*/
    NProgress.done();
});
</script>