页面加载动画实现

为了更良好的交互效果，在页面发起请求，用户等待的同时出现加载动画，可以很好地提升用户体验效果

//刚进入网页，文档状态为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))  //立即执行表达式
        }
    }
 
}

动图：