jQuery NProgress.js加载进度插件的简单使用方法

什么是NProgress.js？

NProgress.js是一款基于jQuery的加载进度条插件，它可以帮助你在页面载入、表单提交、AJAX请求等操作时显示进度条，提高了网站的用户体验，让用户感觉页面加载速度更快。

NProgress.js的使用方法

1.引入jQuery和NProgress.js的文件

在使用NProgress.js前，我们需要先引入jQuery和NProgress.js的文件，可以通过如下代码来实现：

<!-- 引入jQuery文件 -->
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入NProgress.js文件 -->
<link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>

注意，上述代码中的CDN地址可以根据自己的需求来选择。

2.使用NProgress.js创建进度条

在上述文件引入完成后，我们就可以使用NProgress.js来创建进度条了。在加载页面、表单提交或Ajax请求时，我们需要调用NProgress.js的相关接口来实现进度条的创建与更新。

2.1 创建进度条

在页面第一次加载时，我们需要创建一个进度条，可以通过下面的代码实现：

NProgress.start();

上述代码中，NProgress是NProgress.js的全局对象，调用start()方法即可创建进度条。如果需要显示出动画效果，则可以调用下述代码实现：

NProgress.configure({ ease: 'ease', speed: 500 }); // 配置NProgress动画属性
NProgress.set(0.4); // 设置进度条显示的百分比
NProgress.inc(); // 自增进度条百分比，每次自动增加0.1

2.2 更新进度条

在表单提交或Ajax请求时，我们需要更新进度条，可以通过下述代码实现：

NProgress.done();

上述代码中，当表单或Ajax请求完成时，会自动调用done()方法，更新进度条为100%，并显示进度条的消失动画。

示例说明

示例1：页面加载中使用NProgress.js

当页面开始加载时，我们可以在页面底部添加一个进度条，暗示用户页面正在加载中，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NProgress.js进度条示例1</title>
    <link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
    <style type="text/css">
        #nprogress .bar {
            background: #29d;
            position: fixed;
            z-index: 1031;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
        }
        #nprogress .peg {
            display: block;
            position: absolute;
            right: 0px;
            width: 100px;
            height: 100%;
            box-shadow: 0 0 10px #7dd;
            opacity: 1.0;
            -webkit-transform: rotate(3deg) translate(0px, -4px);
            -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
        }
    </style>
</head>
<body>
    <div id="nprogress">
        <div class="bar"></div>
        <div class="peg"></div>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
    <script>
        $(document).ready(function() {
            NProgress.start();
        });
        $(window).on('load', function() {
            NProgress.done();
        });
    </script>
</body>
</html>

示例2：Ajax请求中使用NProgress.js

当我们发起一个Ajax请求时，可以添加一个进度条，暂停用户的其他操作前提醒用户查询正在被处理，示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NProgress.js进度条示例2</title>
    <link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
    <style type="text/css">
        #nprogress .bar {
            background: #29d;
            position: fixed;
            z-index: 1031;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
        }
        #nprogress .peg {
            display: block;
            position: absolute;
            right: 0px;
            width: 100px;
            height: 100%;
            box-shadow: 0 0 10px #7dd;
            opacity: 1.0;
            -webkit-transform: rotate(3deg) translate(0px, -4px);
            -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
        }
    </style>
</head>
<body>
    <div id="nprogress">
        <div class="bar"></div>
        <div class="peg"></div>
    </div>
    <button id="btn">查询</button>
    <div id="result"></div>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#btn').on('click', function() {
                NProgress.start();
                $.get('http://localhost:3000/user', function(result) {
                    NProgress.done();
                    $('#result').html(result);
                });
            });
        });
    </script>
</body>
</html>

以上两个示例中，我们可以看到如何使用NProgress.js实现进度条的创建与更新。当页面或Ajax请求结束时都会自动调用done()方法，更新进度条为100%。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery NProgress.js加载进度插件的简单使用方法 - Python技术站

jQuery NProgress.js加载进度插件的简单使用方法