判断页面加载

源自于“前端思考”群的交流。

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script language="javascript" type="text/javascript"> 
    // 按照 期望的次序 排列每个 div 的 Id. 
    var arr1=new Array("div3","div2","div4","div1"); 
    //var arr1=new Array("if3","if2","if4","if1"); 
    // 期望 次序 div 中的内容. 
    var arr2=new Array("换成你期望的内容。","inner html 2","inner html 4","inner html 1"); 
    //var arr2=new Array("3.html","2.html","4.html","1.html"); 
    // 期望 次序 中 iframe 的状态. 
    var arr3=new Array("false","false","false","false"); 
    function showState(){ 
        // 判断 当前页面是否载入完毕 
        if(window.document.body.readyState=="complete"){ 
            for(i=0; i<arr1.length; i++){ 
                if(arr3[i] == "false"){ 
                    document.getElementById(arr1[i]).innerHTML = arr2[i]; 
                    arr3[i] = "true";
                    return;
                } 
            } 
        } 
    } 
    // 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处 仅 为了方便大家看效果 
    setInterval(showState,2000); 
    
    window.onload=function(){
      window.document.body.readyState="complete";
    }

</script>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 全部延时加载。 当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏，而不能正常访问。</div>
<div id="div1" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div2" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div3" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div id="div4" style="width:200px;height:40px;border:1px solid red;">loading...</div>
<div>这里是页面最重要的内容，您每次打开该页面，均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>