如何控制页面内容的加载顺序

chengzhi

浏览: 112256 次
性别:
来自: 济南

最近访客更多访客>>

sunjunqing

xiehao1020

wade6

guodajun123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Google JavaScript HTML XHTML IE

目前网站之间相互调用的情况越来越多，比如需要调用某个第三方提供的一些接口（天气预报），或者是第三方提供的广告......

但是出于各种原因（网络故障、服务器故障、软件故障......）常常会发生第三方的相应页面不能访问的情况，而直接导致自己网站不能正常访问，或者访问速度比较慢。

比如：某个网站为头、内容、底结构，在网站的头部放置了第三方提供的广告，但是出于某种原因，第三方的服务不能正常访问了，直接导致的情况就是，整个网站头部广告以下的部分均不能正常访问（或者要过很久以后才能打开，昨天的台湾大地震，导致了 Google Adsense 不能正常访问，直接导致了我的个人网站 http://www.oldtool.net 不能正常打开。）。

为了解决如上的问题，查阅了很多文章后，找到如下的解决方案：页面的延时加载（Page Delay Load）。

在 IE　中，几乎每个对象（div iframe td ...　）均有一个属性 readyState(http://msdn2.microsoft.com/en-us/library/ms534358.aspx) ，此属性反应对象在当前页面的载入状态，当该对象完全载入以后，则当前对象的 readyState=="complete" ，借助该属性，可以控制待当前页面最期待的内容载入完成以后，再载入有可能出错的页面（或者是优先级不高的页面）。

详细代码如下：

问题页面代码：
<!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>
<title>精巧软件 www.oldtool.net</title>
</head>
<body>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 可以放置任何第三方的内容，比如广告。</div>
<div id="div1" style="width:200px;height:40px;border:1px solid red;">inner html 1</div>
<div>说明：此处的宽、高，不一定需要提前设置，可以将此 Container 的宽、高根据内部的内容自适应。</div>
<div id="div2" style="width:200px;height:40px;border:1px solid red;">inner html 2</div>
<div>说明：div3中的内容不能正常访问，直接导致其下最重要的内容不能正常打开，或者要过很久以后才可以正常打开。</div>
<div id="div3" style="width:200px;height:40px;border:1px solid red;">

<script type="text/javascript"></script>
<script type="text/javascript" src="http://wrongcode.wrongcode.com/pagead/wrongcode.js">
</script>

</div>
<div id="div4" style="width:200px;height:40px;border:1px solid red;">inner html 4</div>
<div>这里是页面最重要的内容，您每次打开该页面，均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>

修复页面代码：
<!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>
<title>精巧软件 www.oldtool.net</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);
</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>

-----------------------------------------------------

# js中SetInterval与setTimeout用法

JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

分享到：

Struts2标签使用 | Spring和Struts整合的三种方式

2009-07-09 00:31
浏览 1181
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论