<!
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 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>
本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2010/03/10/1682615.html，如需转载请自行联系原作者
