RSS
热门关键字:  宸曦暗暗
当前位置 :| SEO>网页设计>

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

来源: 时间:2008-09-11 Tag: 点击:

转载http://bbl456.blog.sohu.com/72162079.html

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

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

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

为了解决如上的问题,查阅了很多文章后,找到如下的解决方案:页面的延时加载(PageDelayLoad)。

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

详细代码如下:

问题页面代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>精巧软件www.oldtool.net</title>
</head>
<body>
<div>这里是页面的最顶端内容。</div>
<div>如下的div1div2div3div4可以放置任何第三方的内容,比如广告。</div>
<divid="div1"style="width:200px;height:40px;border:1pxsolidred;">innerhtml1</div>
<div>说明:此处的宽、高,不一定需要提前设置,可以将此Container的宽、高根据内部的内容自适应。</div>
<divid="div2"style="width:200px;height:40px;border:1pxsolidred;">innerhtml2</div>
<div>说明:div3中的内容不能正常访问,直接导致其下最重要的内容不能正常打开,或者要过很久以后才可以正常打开。</div>
<divid="div3"style="width:200px;height:40px;border:1pxsolidred;">
<!--GoogleAdsense-->
<scripttype="text/javascript"><!--
google_ad_client="pub-wrongcode";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text_image";
google_ad_channel="";
//--></script>
<scripttype="text/javascript"src="http://wrongcode.wrongcode.com/pagead/wrongcode.js">
</script>
<!--GoogleAdsense-->
</div>
<divid="div4"style="width:200px;height:40px;border:1pxsolidred;">innerhtml4</div>
<div>这里是页面最重要的内容,您每次打开该页面,均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>


修复页面代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>精巧软件www.oldtool.net</title>
</head>
<body>
<scriptlanguage="javascript"type="text/javascript">

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册