目前網(wǎng)站之間相互調(diào)用的情況越來(lái)越多，比如 需要調(diào)用某個(gè)第三方提供的一些接口（天氣預(yù)報(bào)），或者是第三方提供的廣告......
但是出于各種原因（網(wǎng)絡(luò)故障、服務(wù)器故障、軟件故障......）常常會(huì)發(fā)生第三方的相應(yīng)頁(yè)面不能訪問(wèn)的情況，而直接導(dǎo)致自己網(wǎng)站不能正常訪問(wèn)，或者訪問(wèn)速度比較慢。
比如：某個(gè)網(wǎng)站為 頭、內(nèi)容、底 結(jié)構(gòu)，在網(wǎng)站的頭部放置了第三方提供的廣告，但是出于某種原因，第三方的服務(wù)不能正常訪問(wèn)了，直接導(dǎo)致的情況就是，整個(gè)網(wǎng)站 頭部廣告 以下的部分均不能正常訪問(wèn)（或者要過(guò)很久以后才能打開(kāi)，昨天的臺(tái)灣大地震，導(dǎo)致了 Google Adsense 不能正常訪問(wèn)，直接導(dǎo)致了我的個(gè)人網(wǎng)站 http://www.oldtool.net 不能正常打開(kāi)。）。
為了解決如上的問(wèn)題，查閱了很多文章后，找到如下的解決方案：頁(yè)面的延時(shí)加載（Page Delay Load）。
在 IE 中，幾乎每個(gè)對(duì)象（div iframe td ... ）均有一個(gè)屬性 readyState(http://msdn2.microsoft.com/en-us/library/ms534358.aspx) ，此屬性反應(yīng)對(duì)象在當(dāng)前頁(yè)面的載入狀態(tài)，當(dāng)該對(duì)象完全載入以后，則當(dāng)前對(duì)象的 readyState=="complete" ，借助該屬性，可以控制待當(dāng)前頁(yè)面最期待的內(nèi)容載入完成以后，再載入有可能出錯(cuò)的頁(yè)面（或者是優(yōu)先級(jí)不高的頁(yè)面）。
詳細(xì)代碼如下：
問(wèn)題頁(yè)面代碼：
<!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>這里是頁(yè)面的最頂端內(nèi)容。</div>
<div>如下的 div1 div2 div3 div4 可以放置任何第三方的內(nèi)容，比如廣告。</div>
<div id="div1" style="width:200px;height:40px;border:1px solid red;">inner html 1</div>
<div>說(shuō)明：此處的 寬、高，不一定需要提前設(shè)置，可以將此 Container 的寬、高根據(jù)內(nèi)部的內(nèi)容自適應(yīng)。</div>
<div id="div2" style="width:200px;height:40px;border:1px solid red;">inner html 2</div>
<div>說(shuō)明：div3中的內(nèi)容不能正常訪問(wèn)，直接導(dǎo)致其下最重要的內(nèi)容不能正常打開(kāi)，或者要過(guò)很久以后才可以正常打開(kāi)。</div>
<div id="div3" style="width:200px;height:40px;border:1px solid red;">
<!-- Google Adsense -->
<script type="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>
<script type="text/javascript" src="http://wrongcode.wrongcode.com/pagead/wrongcode.js">
</script>
<!-- Google Adsense -->
</div>
<div id="div4" style="width:200px;height:40px;border:1px solid red;">inner html 4</div>
<div>這里是頁(yè)面最重要的內(nèi)容，您每次打開(kāi)該頁(yè)面，均希望該部分內(nèi)容無(wú)論如何可以正常顯示。</div>
<div>這里是頁(yè)面的最底端</div>
</body>
</html>
修復(fù)頁(yè)面代碼：
<!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">
// 按照 期望的次序 排列每個(gè) div 的 Id.
var arr1=new Array("div3","div2","div4","div1");
//var arr1=new Array("if3","if2","if4","if1");
// 期望 次序 div 中的內(nèi)容.
var arr2=new Array("換成你期望的內(nèi)容。","inner html 2","inner html 4","inner html 1");
//var arr2=new Array("3.html","2.html","4.html","1.html");
// 期望 次序 中 iframe 的狀態(tài).
var arr3=new Array("false","false","false","false");
function showState()
{
// 判斷 當(dāng)前頁(yè)面是否載入完畢
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 秒后調(diào)用如上方法, 當(dāng)然,正常應(yīng)用應(yīng)該將此時(shí)間間隔設(shè)置小一些, 此處 僅 為了方便大家看效果
setInterval("showState()",2000);
</script>
<div>這里是頁(yè)面的最頂端內(nèi)容。</div>
<div>如下的 div1 div2 div3 div4 全部延時(shí)加載。 當(dāng)前頁(yè)面中的最重要內(nèi)容不會(huì)因 div1 div2 div3 div4 內(nèi)容的損壞，而不能正常訪問(wèn)。</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>這里是頁(yè)面最重要的內(nèi)容，您每次打開(kāi)該頁(yè)面，均希望該部分內(nèi)容無(wú)論如何可以正常顯示。</div>
<div>這里是頁(yè)面的最底端</div>
</body>
</html>
posted on 2007-12-21 16:14
末日風(fēng)情 閱讀(960)
評(píng)論(1) 編輯 收藏 所屬分類:
javascript