WordPress顶部加载进度条

转自点点 9 年前 回复

, , ,

这图是从我的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童鞋的分享。

转自https://xiaozhou.net/implementation_of_loading_progress_bar_on_the_top_of_wordpress-2011-02-16.html

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)

2857