NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条

Y5neKO

发布于 2022-01-13 13:05:47

4.8K0

发布于 2022-01-13 13:05:47

文章被收录于专栏：Y5neKO博客

0x00 前言

前几天给博客换了@Veen Zhao大佬的Cuteen主题，非常好看，但是因为不想让自己的博客和其他人的千篇一律，于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西。正巧前几天发现因为网站带宽的原因，一些页面加载会花一些时间，页面没有任何动静仿佛会让人浏览体验变差，因为太穷无奈只有在不花钱的情况下提升一点点浏览体验（不知道是不是因为我强迫症的原因），这时候给网站添加一个加载进度条NProgress.js就是一个不错的选择了

0x01 NProgress.js介绍

NProgress是一个前端全站进度条UI插件，作者是来自菲律宾马尼拉的@Rico Sta Cruz。目前，Youtube等多家知名网站都采用过这个模式，本项目以MIT许可证开源。官网地址 Github项目地址

0x02 安装插件

使用NProgress需要先引入1.8及以上版本的jQuery jQuery官网官方给出的安装方法有下面几种： NPM

npm install --save nprogress

Yarn

yarn add nprogress

bower

bower install --save nprogress

引入静态文件

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

0x03 使用方法

首先通过上面的几种方法安装插件基础使用start()和done()方法

NProgress.start();
NProgress.done();

高级通过调用.set(n)方法来指定百分比，其中n的取值范围是0.0到1.0

NProgress.set(0.0);     //等同于.start()方法
NProgress.set(0.5);     //进度条50%
NProgress.set(1.0);     //等同于.done()方法

通过调用.inc()方法来随机增加进度，也可以指定以某种速度增加进度，但永远不会增加到100%

NProgress.inc();
NProgress.inc(0.2);      //以0.2的速度增加

绑定pjax事件

$(document).on('pjax:start', function() { NProgress.start(); });     //绑定pjax开始事件
$(document).on('pjax:end',   function() { NProgress.done();  });     //绑定pjax结束事件

0x04 配置实例

这里拿我的博客演示一遍首先我们在主题的头部文件全局引入jQuery

接下来在主题头部文件引入NProgress的静态文件

然后我们找到主题的pjax函数部分，我们可以看到箭头所指的分别为pjax的三个全局事件

这里参考pjax的全局事件 注：以下内容来自大佬博客，原作者：疯子110 / 原地址：博客园-疯子加天才

了解了pjax的全局事件，接下来我们找到对应的方法在main.js中的位置，因为主题自带了一个pjax加载动画，我们先把它注释掉

然后把上面提到的方法与对应的pjax事件绑定

完成了与pjax的绑定，接下来是第一次加载页面时加载进度条，在任意位置插入script标签及以下JavaScript代码即可

NProgress.start();      //刷新和进入时加载NProgress进度条
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);

文章列表用的是ajax加载，因此接下来我们把NProgress与文章列表ajax事件绑定因为cuteen主题ajax加载没有设置触发事件，所以我们自己写一套连缀的触发事件

这里参考jQuery的ajax全局事件： jquery的ajax全局事件, 会在任意一个ajax请求执行的时候触发，ajax提供了6个全局事件函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。

jQuery的全局事件需要document注册，写法是固定的，如下：

$(document).ajaxStart(function () {
console.log("ajaxStart在ajax请求开始时触发");
});

6个全局事件函数分别为：

ajaxStart在ajax请求开始时触发
ajaxSend在beforeSend回调函数之后触发
ajaxSuccess在success回调函数之后触发
ajaxError在error回调函数之后触发
ajaxComplete在complete回调函数之后触发
ajaxStop在ajax请求结束时触发

首先按自己的需求选择全局事件函数连接，我这里是跟随pjax事件选择的ajaxSend，ajaxComplete和ajaxStop，连接如下：

<script>
    $(document).ajaxSend(function () {
        NProgress.start();
    });
    $(document).ajaxComplete(function () {
        NProgress.inc();
    });
    $(document).ajaxStop(function () {
        NProgress.done();
    });
</script>

效果为点击加载更多按钮后执行.start()事件展示进度条并逐渐增加，文章加载完毕后执行.done()事件