首页 前端设计

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个全局事件函数分别为:

  1. ajaxStart在ajax请求开始时触发
  2. ajaxSend在beforeSend回调函数之后触发
  3. ajaxSuccess在success回调函数之后触发
  4. ajaxError在error回调函数之后触发
  5. ajaxComplete在complete回调函数之后触发
  6. ajaxStop在ajax请求结束时触发

首先按自己的需求选择全局事件函数连接,我这里是跟随pjax事件选择的ajaxSendajaxCompleteajaxStop,连接如下:

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

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

0x05 总体效果

目前还存在一个bug,评论ajax在文章内部点击浏览器刷新后会失效,虽然触发条件比较难,但是身为强迫症留着这个bug心里很不是舒服,所以如果有前端大佬请务必联系我帮助我修复,小弟必有重谢
总体效果参考我现在的博客,个人认为在加载页面的时候看着进度条一点一点的加载还是比干等着要舒服的多。
虽然这一切总体来说还是没什么卵用,实际上就是满足了自己一个强迫症的想法
不过,经过一下午加一晚上的折腾,还是学到了许多,身为一个前端小白,以后的路还长着呢




文章评论

目录
喜迎
新春