博客添加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. 2011.03.31

    隆重推出WordPress主题 LSZ BlueCMS Pro V3

    近来我有点蛋疼,一直在折腾WordPress…

  2. 没有图片

    2010.07.05

    火狐Firefox书签同步工具 — Firefox Sync

    怪兽实验室之前有一个项目叫做“Weave S…

  3. 没有图片

    2010.03.31

    Comsenz 核心产品 Discuz!X 1.0 体验包发布

    2010年3月18日下午,Comsenz公司…

  4. 没有图片

    2013.07.10

    WordPress主题 xSummer:淘宝客|亚马逊|当当等推广主题

    WordPress 淘宝客主题 xTaoBa…

  5. 没有图片

    2010.09.18

    Internet Explorer 9 正式版将冲击浏览器行业

    微软件的新一代浏览器Internet Exp…

  6. 没有图片

    2013.12.23

    小红伞 杀毒软件永远的经典

    其实说起来杀毒,已经很早就和国内外各大杀毒软…

评论

  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下午

    效果很不错哇、