0x01 NProgress.js介绍
NProgress是一个前端全站进度条UI插件,作者是来自菲律宾马尼拉的
@Rico Sta Cruz
。
目前,Youtube等多家知名网站都采用过这个模式,本项目以MIT许可证开源。官网地址 Github项目地址
0x02 安装插件
使用NProgress需要先引入1.8及以上版本的jQueryjQuery官网
官方给出的安装方法有下面几种: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
然后我们找到主题的pjax函数部分,我们可以看到箭头所指的分别为pjax的三个全局事件
这里参考pjax的全局事件
注:以下内容来自大佬博客,原作者:疯子110 / 原地址:博客园-疯子加天才
了解了pjax的全局事件,接下来我们找到对应的方法在main.js中的位置,因为主题自带了一个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()事件
0x05 总体效果
目前还存在一个bug,评论ajax在文章内部点击浏览器刷新后会失效,虽然触发条件比较难,但是身为强迫症留着这个bug心里很不是舒服,所以如果有前端大佬请务必联系我帮助我修复,小弟必有重谢
总体效果参考我现在的博客,个人认为在加载页面的时候看着进度条一点一点的加载还是比干等着要舒服的多。
虽然这一切总体来说还是没什么卵用,实际上就是满足了自己一个强迫症的想法
不过,经过一下午加一晚上的折腾,还是学到了许多,身为一个前端小白,以后的路还长着呢