loading | 佳佳酱

[前言：由于种种原因，功能性的代码全放到一个单独页面去了]

今天因为?????,我给博客加上了一个菊花来表示页面还在加载,防止有些朋友因为我的博客加载时间过长(这是为什啊！)而以为我博客挂了.

做这个东西几乎用了我一天的时间..说明我的技术还是不足啊,加油!

接下来是正文.

本次修改用到了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事件都会丢失，所以还是用这种方法了。

佳佳酱

标签归档：loading

本博加上了loading大菊花