用 document.readyState == "complete" 判断页面是否加载完成
传回XML 文件资料的目前状况。
基本语法
intState ＝ xmlDocument.readyState;
说 明:
这个属性是只读的，传回值有以下的可能：
0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
1-LOADING：加载程序进行中，但文件尚未开始解析。
2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。
4-COMPLETED：文件已完全加载，代表加载成功。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body,html{height:100%;height:100%;}
.load{position:relative;height:100%;height:100%;background-color: rgba(0,0,0,0.5);}
.load img{position:absolute;top:50%;left:50%;margin-top:-62px;margin-left:-62px;}
</style>
</head>
<body>
<div class="load" id="load">
<img src="data:images/load.gif" alt="">
</div>
<div class="container"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
for(var i = 0;i < 3000;i++){
document.writeln("这是第"+i+"条数据！"+"<br/>");
}
}
document.onreadystatechange = subSomething;
function subSomething() {
if(document.readyState == "complete"){
//加载完毕执行
var load = document.getElementById("load");
load.style = "display: none";
}
}
</script>