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

    饭否 WordPress 插件 Fanfou Tools

    这个是fanfou.com的Wordpres…

  2. 2011.09.28

    HTML5 WordPress主题 SimpleX

    今天博客正式启用HTML5 WordPres…

  3. 没有图片

    2010.01.11

    DISCUZ7.2和SupeSite7.5聚合提示“论坛路径错误”的方法

    今天想实现Supesite 7.5 与Dis…

  4. 没有图片

    2010.11.26

    中国博客联盟被Admin5推荐

    下面是A5推荐文内容: 网站名称:中国博客联…

  5. 没有图片

    2011.09.14

    几行代码让你的WordPress页面添加摘要功能

    WordPress 在发布日志的时候,会有摘…

  6. 没有图片

    2009.09.04

    Flickr Uploadr 在免费的相册空间Flickr 上分享你的照片软件

    在 Flickr.com 上上传 將你的相片…

评论

  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

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