WordPress顶部加载进度条的实现

近来貌似很多童鞋对俺WordPress头部的那个动态的加载进度条比较感兴趣。其实，这并不是我原创的，而是跟ZWW童鞋偷师来的，思路也是ZWW童鞋介绍的。所以，我在这里只是简单介绍一下实现方法，其实挺简单的。

先上图：

这图是从我的blog加载的时候截取下来的。从图中，大家可以清楚的看到，红色跳动的进度条。而那个绿色的进度条，是我的blog皮肤本来就带的一条绿色的线条。会动的那个红色进度条，是在CSS中新建的一个Div。

红色进度条的HTML代码如下：

<div style="display: none;" id="loading"><div style="width: 0%; display: block;"></div></div>

红色进度条的CSS定义如下：

/************load progress bar***************/
#loading {
    height: 8px;
    left: 0;
    position: absolute;
    top: 100px;
    width: 100%;
    z-index: 99999;
}

#loading div{
    display:none;
    height:8px;
    background:#d54e21;
}

大致实现原理如下：

用绝对定位的方式，将红色的进度条位置准确定位到皮肤背景的绿色线条上，并且进度条的高度要和背景那个绿色线条一致。大家在HTML定义中也看到，在初始情况下，这个红色的进度条是不可见的。加入上面的两处代码，我们的初始准备工作，就做好了。接下来，就更简单了，在你的wordpress首页的不同地方，加入不同的jQuery代码，让红色的进度条可见，并且改变其width值，让它看起来就像动了一样。

比如，在header.php中任意位置，加入如下的jQuery代码：

<script type="text/javascript">
        $("#loading").show();
        $("#loading div").animate({width:"20%"});
</script>

这样，浏览器在加载到header.php的时候，红色的进度条，就由”隐身”，变为可见，并且长度以动画的形式，增加到20%。这样，聪明的童鞋一定想到了，在index.php的不同位置，分别加入上面的代码，让红色进度条的长度变为40%，60%，80%，这样，我们就能看到红色进度条动态加载的效果了，并且，由于这个代码放在首页不同的位置，它确实能反映出当前浏览器加载代码的真实进度。

最后，有一个收尾的工作，在footer.php中，加入jQuery代码：

<script type="text/javascript">
$("#loading div").animate({width:"100%"},function(){
setTimeout(function(){$("#loading").hide();},1000);
}); 
</script>

这样的目的，是让进度条在首页尾部加载到100%之后，进度条消失，露出皮肤默认的那个绿色线条。

至此，教程结束，其实就这么简单，呵呵。最后，再次感谢ZWW童鞋的分享。