11月25日
由于最近在写一个web项目，由于前端框架开发，和后台查数据的语法不成熟导致页面加载速度过慢，遂想到用loading效果来过渡:
粗略的查阅了下网上的实现方法，在此总结下方法实现
先上效果图：
代码：
<link rel="stylesheet" href="/lee_loading.css"><script src="/lee_loading.js"></script>
上面两段代码放在<head></head>中间即可
思路详解：
JS部分：在页面加载前就先加载一个div罩，等待页面全部加载完成后，关闭此div罩
//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight,_PageWidth = document.documentElement.clientWidth;//计算loading框距离顶部和左部的距离（loading框小部件的宽度为90px，高度为90px） var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,_LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;//在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;filter:alpha(opacity=80);z-index:10000;"><div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';//呈现loading效果 document.write(_LoadingHtml);//监听加载状态改变 document.onreadystatechange = completeLoading;//加载状态为complete时移除loading效果 function completeLoading() {if (document.readyState == "complete") { //此引用了Jquery，页面没有导jq包的，需要自行加入$("#loadingDiv").fadeOut(1500);}}CSS部分：CSS3构造一个无限循环动作的loading框.spinner {width: 60px;height: 60px;background-color: #67CF22;margin: 100px auto;-webkit-animation: rotateplane 1.2s infinite ease-in-out;animation: rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes rotateplane {0% { -webkit-transform: perspective(120px) }50% { -webkit-transform: perspective(120px) rotateY(180deg) }100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }}@keyframes rotateplane {0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% {transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)} 100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}}
