一起学建站: wordpress 加入页面载入进度条

刚刚把这个东西搞上，其实我也很早就在ZWWoOoOo的付费主题中看到过了。不过一直自己的主题没地方放，二是懒得动手，所以一直没有捣鼓过。

它的原理：在页头放置一个 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。请根据下面步骤来。

首先，确定你的主题已经引入 jQuery 框架(一定要放在页头 <head>标签内)，然后在header.php中任意位置插入如下jQuery 代码

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

其中的10%应该随载入顺序逐步增加，直到 footer.php

之后在<body>标签起始位置放置：

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

最后在footer.php文件中插入下面的代码：

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

还有CSS文件，请参考下面代码自行加工：

#loading {
height: 4px;
left: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 99999;
}

#loading div{
display:none;
height:4px;
background:#4171b8;
}

搞定收工，刷新查看效果吧！

一起学建站

wordpress 加入页面载入进度条

没有评论:

发表评论