给页面添加 页面载入进度条
导读：它的原理：在页头放置一个 loading 状态，然后页尾载入一段 JS 隐藏掉即根据浏览器的载入顺序来实现的简易 Loading 状态条。请根据下面步骤来。首先，确定你的主题已经引入 jQuery 框架(一定要放在页头 <head>标签内 ，然后在header.php中任意位置插入如下jQuery 代码< script ...
它的原理：在页头放置一个 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;
}
搞定收工，刷新查看效果吧！
Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！