1、在页面未加载完毕之前显示的loading Html自定义内容 两层div 外层是div背景,全屏加背景色能够盖住网页内容 内层div是gif动画
var _LoadingHtml = '<div id="loadingDiv" ><div ></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 加在页面中