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

wordpress 2018-01-26 1,131 次浏览 24 条评论

无聊折腾

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

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

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

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

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

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

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

如果有的话,你可以选择在本地使用,也可以使用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>

把这两行代码放到<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. 呃,。。如果CDN挂了,你这里岂不是卡半天?

    • 冰鸟

      应该不会挂吧,那么时间了

  2. 万一哪天cdn一下子抽风的话不就完蛋了! 😮

    • 冰鸟

      你们怎么都这么想,我本地已经做好了啊,又不是不能用,大不了撤掉

        • 冰鸟

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

          • 那我就好好支持一下吧!我也看看我搞一个。

          • 冰鸟

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

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

    • 冰鸟

      我正想把这东西撤掉呢,又不想用了

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

    • 冰鸟

      加上这个东西纯属心里作用,实际并没有什么卵用

        • 冰鸟

          当然了,用户为王

    • 冰鸟

      昨天就看见你的站已经用了,感觉很不错啊!

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

    • 冰鸟

      加了也好,美观一些,实际用上也不太影响体验

    • 冰鸟

      谢谢支持

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

    • 冰鸟

      这个效果图啊,我给撤掉了

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

    • 冰鸟

      这句话,信了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

53 − = 47