博客添加jQuery页面载入进度条

今天花生给博客添加了页面载入进度条,普通的页面加载一般都比较生硬,如果载入速度慢的话,很难让浏览者等待页面加载,如果把页面加载过程做成动态进度条,肯定给浏览者一个很好的等待体验。

我的博客是在顶部添加的1px的蓝线消失的过程,等页面全面加载完毕后,蓝线就会全部消失。

加载条的载入原理其实很简单:WordPress主题一般由header、index(single、archive)、sidebar、footer四部分构成,我们对每部分加载样式的一部分,到最后加载完毕即可。

要实现线条加载的效果,需要主题启用jQuery功能,在<header></header>之间加入代码:

为了提升js文件的加载速度,我直接把这个js文件放在主题目录下,你也可以使用下面的代码(二者选一):

在页面body开始标签的后面加入代码:

CSS文件样式代码加入到主题的style.css文件中:

/*头部进度条*/
#blog-loading {
width:100%;
height:1px;
background:#0099cc;
position:fixed;
left:0;
top:0;
}
#blog-loading div {
width:1px;
height:1px;
background:#fff;
}

之后在主题的各部分加载这个样式,我在header中加载15%,在index部分加载30%,在sidebar部分加载60%,在footer中加载完毕。

那就在各部分加入以下代码:


把里面的15%换成进度即可。

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2009.07.10

    挖掘BBPress 论坛插件资源

    前几天安装了BBPress论坛系统,体验起来…

  2. 没有图片

    2012.06.14

    WordPress页面调用相关参数

    平时大家关注的Wordpress日志的调用更…

  3. 没有图片

    2012.11.27

    Discuz! X3.0 已经进入最后的研发攻坚阶段,性能将有大提升

    1、离Discuz! X2.5发布已有半年时…

  4. 没有图片

    2012.12.12

    WordPress 3.5 正式版发布 李思章博客升级

    本来只打算更新一下WordPress插件技术…

  5. 没有图片

    2011.11.19

    32个漂亮的带JS特效的个人卡片Web站点

    一直在寻找这些漂亮的个人卡片模板,找了很多,…

  6. 没有图片

    2009.09.28

    我也玩数独Sudoku

    从 MeetMuMu 得知除了MuMu之外,…

评论

  1. 尘埃影像 2011.10.24 8:35上午

    这个方法不错,能有效的从视觉上分配网站的加载速度

  2. mqie 2011.10.15 9:14下午

    希望研究下异次元的页面加载效果,感觉很不错

  3. 世纪之光 2011.10.15 3:53下午

    效果蛮好的,不过我的博客主页没啥图片,一般也不用这效果。

  4. 青衿 2011.10.14 1:38上午

    目前遇到了两个问题得向博主求解
    1.我的加载到100%后又退回到中间了,是什么原因呢?
    2.怎么让进度条加载完后自动消失呢?

  5. 长岛冰泪 2011.10.13 10:14上午

    测试回复

  6. Louis Han 2011.10.12 8:20下午

    奇怪 代码怎么都不可见呢

    • 落花生 2011.10.13 7:28上午

      WordPress默认的是自动把一些代码给解析掉的,等我加个代码高亮插件什么的试试。

    • 落花生 2011.10.13 8:37上午

      你博客那边好热闹哦!

  7. Mylieb 2011.10.12 1:29下午

    嗯……刷新好几遍才看到这个。
    真的会呗忽略掉……太靠上边缘了。和我的IE9的蓝色几乎重合,你不说有这个东西,我估计很久才会发现。

    • 落花生 2011.10.13 7:26上午

      这个好办,只需要把线的高度调整大一些就行了。

  8. 河石子 2011.10.12 12:46下午

    效果很不错哇、

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!