[前言：由于种种原因，功能性的代码全放到一个单独页面去了]
大部分修改自无聊的等待状态一枚
今天因为?????,我给博客加上了一个菊花来表示页面还在加载,防止有些朋友因为我的博客加载时间过长(这是为什啊！)而以为我博客挂了.
做这个东西几乎用了我一天的时间..说明我的技术还是不足啊,加油!
接下来是正文.
本次修改用到了jquery(我是赖上它了么),原本是把所有代码都写在header里的,后来我发现这样并不好,这样每次加载这个载入画面也要废一些资源，于是我把它单独放在一个html文件里，这样也是有好处的(虽然对有些人来说这样做并不好),好处在于此页面会单独缓存，不用每次一起加载，就算强制刷新也不会牵涉到刷新iframe里的内容，这样可以更快速的加载。
首先是html里的内容,
<html>
<head>
<script src="../js/jquery.js"></script>
<style>div#waitallload { position: fixed; height: 100%; width: 100%; background-color: rgba(204,204,204,0.5); } div.huaban { position: absolute; background-color: #000; opacity: 0.4; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .caozuodingweidiancenter { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } div#loadingall { position: relative; height: 28px; width: 28px; display: block; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); margin: 0 auto; opacity: 0.5; top: 50%; }</style></head>
<body>
<div id="waitallload">
<div id="loadingall" class="caozuodingweidiancenter">
<div class="huaban" id="huaban1" style="top:0px;left:12px;width:4px;height:8px;"></div>
<div class="huaban" id="huaban2" style="right:3px;top:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
<div class="huaban" id="huaban3" style="right:0px;top:12px;width:8px;height:4px;"></div>
<div class="huaban" id="huaban4" style="right:5px;bottom:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
<div class="huaban" id="huaban5" style="bottom:0px;left:12px;width:4px;height:8px;"></div>
<div class="huaban" id="huaban6" style="left:3px;bottom:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
<div class="huaban" id="huaban7" style="left:0px;top:12px;width:8px;height:4px;"></div>
<div class="huaban" id="huaban8" style="left:5px;top:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
</div>
</div>
</body>
<script>huaban = 1;
function huabanblack() {
$("#huaban" + huaban).fadeTo(0, 1);
}
function huabanwhite() {
var xiaoshi = 0;
if (huaban < 8) {
huaban = huaban + 1;
} else {
huaban = 1;
}
if (huaban == 1) {
xiaoshi = 8;
} else {
xiaoshi = huaban - 1;
}
$("#huaban" + xiaoshi).fadeTo(600, 0.4);
}
/*等待菊花*/
var juhua1haohei, juhua1haobai;
function loadingstart() {
juhua1haohei = setInterval('huabanblack()', 90);
juhua1haobai = setInterval('huabanwhite()', 90);
}
loadingstart();</script>
</html>
然后在header里加入html的iframe
<iframe src="<?php echo get_template_directory_uri();?>/framepage/wait.html" style="z-index:-2;display:none;" id='waitiframe' class="bgiframe"></pre>
请无视php脚本，把它放在z-index的-2层上，以便显示在最下面,【z-index的-1层为太阳君和月亮酱】,先让他的显示为none,这样可以利用fadeIn淡入.接下来是就剩js的事了.
在head中的functions.js文件中进行了一下定义
$("#waitiframe").ready(function(e) { //iframe加载好时进行操作，防止出现元素不存在的错误
var waitiframe = $("#waitiframe");//获取这个iframe
waitiframe.fadeIn(500, //500毫秒(0.5秒)飘进
function() {
function loadingstop() { //停止加载状态的函数
waitiframe.fadeOut(500,//菊花iframe飘出去
function() {
waitiframe.remove(); //删掉这个iframe【这样就可以省去启动和停止菊花转动的代码了~~】
});
}
$(window).load(function(e) { // 当完全加载好的时候
loadingstop(); //停止载入动画
})
});
});
但是使用$(window).load有时还是会失效，所以我在页面最底下的修bug的js文件中加入了
var checkwaitiframetimeout; //延时变量
function checkwaitiframe(){ //检测加载状态的函数[叫这个名字是因为原本它是用来检测iframe是否还在的函数，后来就没改]
if(document.readyState =="complete"){ //加载状态
clearTimeout(checkwaitiframetimeout); //清除延时
$("#waitiframe").remove(); //清除iframe
}
}
接着给下面的$(document).ready中加入
checkwaitiframetimeout=setInterval("checkwaitiframe()",3000);//3秒检测一次载入状态
至于不用自带的状态改变事件是因为担心事件不被捕获。。毕竟连上面的load事件都会丢失，所以还是用这种方法了。
