为了更良好的交互效果，在页面发起请求，用户等待的同时出现加载动画，可以很好地提升用户体验效果
//刚进入网页，文档状态为loading，500ms内不展示动画 var divHtml="<div id='bgbox' style='position:fixed;width:100%;height:100%;z-index:1000; display:none;background-color:#000;opacity:0.6;filter:alpha(opacity=60);'></div><div id='loadingBack' style='position:fixed;width:100%;height:100%;z-index:1001;display:none; '><img style='position:absolute;left:50%;top:50%;margin-left:-16px;margin-top:-16px' src='../js/loading/loading.gif' /></div>"; document.write(divHtml); var child=document.getElementById("loadingBack"); var bg=document.getElementById("bgbox"); //页面载入的时候延迟500ms出现动画 setTimeout(function(){ //500ms后判断文档加载状态如果还是loading,则开始定时判断文档的加载状态，如果不是，那么动画就不出现 if(document.readyState=="loading"){ //根据文档状态显示或隐藏加载动画 var timer=setInterval(function() { // console.log(document.readyState) switch (document.readyState) { case "loading": // The document is still loading. child.style.display="block"; bg.style.display='block'; break; case "interactive": // The document has finished loading. // We can now access the DOM elements. child.style.display="none"; bg.style.display='none'; clearInterval(timer); break; case "complete": // The page is fully loaded. child.style.display="none"; bg.style.display='none'; clearInterval(timer); break; } }, 500); } },500) //点击的时候延迟500ms出现动画 //文档加载完毕后，点击按钮或者链接产生加载动画 window.onload=function(){ var aLinks=document.getElementsByTagName('a'); var submitBtns=document.getElementsByTagName("input"); for(var i=0;i<aLinks.length;i++){ if(aLinks[i].target=="_blank"){//对新打开标签的链接，不做加载动画处理 continue; } (function(i){ aLinks[i].onclick=function(){ setTimeout(function() { child.style.display="block"; bg.style.display='block'; }, 500); } }(i)) } for(var j=0;j<submitBtns.length;j++){ if(submitBtns[j].type=="submit"){ //对submit按钮做加载动画 (function(j){ submitBtns[j].onclick=function(){ setTimeout(function() { child.style.display="block"; bg.style.display='block'; }, 500); } }(j)) //立即执行表达式 } } }动图：
