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

    最轻量级功能最强大图片展示效果slimbox

    本来博客已经启用了slimbox代码,实现图…

  2. 没有图片

    2009.10.09

    层与关键帧 -菠萝AE学习笔记

    实验项目 AE快速入门 实验目的 掌握视频处…

  3. 2017.06.11

    Simple Lightbox – jQuery Lightbox插件

    简介 Simple Lightbox 是一款…

  4. 没有图片

    2011.06.08

    卡巴斯基发布Anti-Virus 与 Internet Security 2012

    大家熟悉的老牌杀毒软件卡巴斯基 Anti-V…

  5. 没有图片

    2009.09.26

    WordPress 不用插件实现运行代码框(转)

    本来就想找个实现代码运行的插件,感觉都不太好…

  6. 没有图片

    2011.11.08

    WordPress导航菜单输出标题描述属性

    今天制作MT主题,想显示导航菜单的描述,于是…

评论

  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

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