WordPress折腾:给网站加了个进度条

无聊折腾

当然啊,WordPress好久不折腾了,纯粹是手痒痒了,不过过几天厌烦了,可能会直接就把它给撤掉,不太喜欢搞很多动画,虽然这些动画看起来很好看。也是闲着无聊,顺带着把那个百度的熊掌号页面给做了。

关于熊掌号,这个东西大家要稍微看重一点,毕竟熊掌是百度的标志,百度的logo都是熊掌,可想而知的重要性不言而喻。

关于熊掌号拖到今天,也就不说啥了,总算解决了!

不过,今天看到一个站点,上面有个进度条,显得很好看,心痒痒也想着整一个。这不,依靠百度整了一个多小时,弄好了,赶紧记下来,恐怕后面给忘了,顺便也分享给大家,谁想用,甭客气,直接拿走就是了。

首先呢,先介绍一下,这个东西名字叫Nprogress,这个小东西估计做前端的熟悉,我不熟悉,教程还是到GitHub找到的。

这个小东西该怎么用呢?别急,先看看需要准备些什么?

首先,先确认有没有jQuery.js,没有的话,使用公共库CDN或者网上下载一个,添加一下,很方便。

<script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="//lib.baomitu.com/jquery/3.5.0/jquery.js"></script>  (举例,使用360公共前端库,自适应的)

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>   (jsdelivr也很不错呢)

如果有的话,你可以选择在本地使用,也可以使用CDN,看你选择。

使用本地的话,js、CSS文件请去GitHub下载:https://github.com/rstacruz/nprogress

下载名字为nprogress.js、nprogress.css这两个小东西,并且补充到路径里,具体的操作就不讲述了,GitHub里有教程 。

注重讲使用CDN,CDN加载要比本地服务器加载快多了,而且全国基本速度都差不多。

使用CDN的话,那就太简单了,还快,还简单,何乐而不为呢,墙裂推荐使用CDN!

关于这个CDN的来源,有必要解释一下,这家的CDN是BootCDN支持的,亲自用过一段时间,99%的可用率,这家是和又拍云合作的,如果出现公共库出现攻击导致网站打不开,又拍云会负责解决的,很大家放心使用!

如果真的实在不放心的话,请务必不要使用CDN,直接下载JS和CSS文件在本地调用即可!

CDN支持https,大可放心使用!

<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>

目前建议,强烈使用字节跳动的CDN,加载速度明显比bootcdn要快,要稳,不信可以测试!

<script src="https://s3.pstatp.com/cdn/expire-1-M/nprogress/0.2.0/nprogress.min.js"></script>

<link href="https://s2.pstatp.com/cdn/expire-1-M/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

把这两行代码放到<head>…</head>之间。

当当当,剩下的重磅来袭

<script>

    // Show the progress bar 
    NProgress.start();

    // Increase randomly
    var interval = setInterval(function() { NProgress.inc(); }, 1000);        

    // Trigger finish when page fully loaded
    jQuery(window).load(function () {
        clearInterval(interval);
        NProgress.done();
    });

    // Trigger bar when exiting the page
    jQuery(window).unload(function () {
        NProgress.start();
    });

</script>

把这代码也直接也粘贴到<head>…</head>之间。

最后就是,刷新页面,清除缓存,看看是不是顶部有一个进度条,是不是特简单!

浊以静之徐清,安以动之徐生

你也可能喜欢

24 条评论

  1. 就放心吧,BootCDN用的是又拍云!收费的哪敢GG,可以说99%稳定。在考虑BootCDN挂之前想想自己会不会挂吧

    1. @狂放 这句话,信了!

  2. 没看到效果图无法体会

    1. @懿古今 这个效果图啊,我给撤掉了

  3. 又让博客多了一项加载。

    1. @热腾网 加了也好,美观一些,实际用上也不太影响体验

  4. 有个进度条 ,逼格高大上,牛

    1. @银色月航 昨天就看见你的站已经用了,感觉很不错啊!

  5. 本地和CDN各有各的优劣势,CDN肯定要快。其实我觉得网站的加载速度要大于美观度,所以一般动画,我都没有用 :mrgreen:

    1. @养肝护肝 加上这个东西纯属心里作用,实际并没有什么卵用

      1. @冰鸟 一切为了用户体验 :mrgreen:

        1. @晴和君 当然了,用户为王

  6. 之前好像也弄过一个,后来去掉了,简洁一点

    1. @唯心寒辞 我正想把这东西撤掉呢,又不想用了

  7. 万一哪天cdn一下子抽风的话不就完蛋了! :eek:

    1. @明月清风 你们怎么都这么想,我本地已经做好了啊,又不是不能用,大不了撤掉

      1. @冰鸟 不怕一万,就怕万一呀!

        1. @明月清风 弄啥都是有风险的,不能说有风险的我们就不用,服务器被还有被攻击的风险呢,公用的CDN干嘛不用,这家的CDN我都用了好长时间了,效果还不错,都在200ms左右。可以百度搜索一下这家的名字叫bootcdn,再做决定用不用吧.总的来说吧,关键又没有多少人访问,管他呢!

          1. @冰鸟 那我就好好支持一下吧!我也看看我搞一个。

          2. @明月清风 这个前端公用库是又怕云支持的,又拍云还是算靠谱点吧,和七牛云差不多,感觉比七牛好点,都是主要做CDN业务的,比较专注,各方面还是比较完善的,技术方面敢于突破创新,挺看好的又拍云的,我打算CDN再申请个又拍云试试!

  8. 呃,。。如果CDN挂了,你这里岂不是卡半天?

    1. @姜辰 应该不会挂吧,那么时间了

发表评论

插入图片
返回顶部

微信扫一扫

微信扫一扫