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

2011年10月12日 14 条评论 12.71k 次阅读 0 人点赞

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

我的博客是在顶部添加的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%换成进度即可。

落花生

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

文章评论(14)

  • 尘埃影像

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

    2011年10月24日
  • mqie

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

    2011年10月15日
  • 世纪之光

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

    2011年10月15日
  • 青衿

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

    2011年10月14日
  • 长岛冰泪

    测试回复

    2011年10月13日
  • Louis Han

    奇怪 代码怎么都不可见呢

    2011年10月12日
    • 落花生

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

      2011年10月13日
    • 落花生

      @Louis Han 你博客那边好热闹哦!

      2011年10月13日
  • Mylieb

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

    2011年10月12日
    • 落花生

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

      2011年10月13日
  • 河石子

    效果很不错哇、

    2011年10月12日