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

    博客升级到 WordPress 3.1.1

    昨天还在WordPress官方关注WordP…

  2. 2014.06.25

    响应式 jQuery 滑块插件 – iView Slider

    iView Slider 是一款优秀的 jQ…

  3. 没有图片

    2010.07.17

    WordPress 3.0 中文包迟迟不发的一点感慨

    WordPress 3.0 英文版早已发布很…

  4. 没有图片

    2010.11.26

    中国博客联盟被Admin5推荐

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

  5. 没有图片

    2012.06.08

    WordPress文章列表不同行控制不同样式

    平时咱们看到的Wordpress日志列表样式…

  6. 没有图片

    2010.03.15

    DedeCMS 5.5 用当前位置标签实现标题的优化

    网上较流行实现DEDECMS二级目录|一级目…

评论

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

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

  2. mqie 2011.10.15 9:14下午

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