分享，在网页中加入loading动画

1、在页面未加载完毕之前显示的loading Html自定义内容 两层div 外层是div背景，全屏加背景色能够盖住网页内容 内层div是gif动画

var _LoadingHtml = '<div id="loadingDiv" style="width: 100%;height: 100%;background-color: #FFFFFF; z-index: 100;"><div  style="position:absolute;width:343px;left:50%;bottom:50%;height:391px;margin-bottom:-195px;margin-left:-171px;background-color: #FFFFFF;opacity:1;z-index:100;background:url(img/load.gif) no-repeat"></div></div>';

2、呈现loading效果

document.write(_LoadingHtml);

3、监听加载状态改变

document.onreadystatechange = function completeLoading() {
        //加载状态为complete时移除loading效果
        if (document.readyState == "complete") {
            document.getElementById("page1").style.display = "block";//#page是你第一个页面
            var loadingMask = document.getElementById('loadingDiv'); //获取动画预加载动画的div
            loadingMask.parentNode.removeChild(loadingMask); //找到加载动画父级，然后删除自己
        }
    }

4、将这段代码插入到head标签中，也可以作为外部js 加在页面中