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