目前網站之間相互調用的情況越來越多，比如 需要調用某個第三方提供的一些接口（天氣預報），或者是第三方提供的廣告......
但是出于各種原因（網絡故障、服務器故障、軟件故障......）常常會發生第三方的相應頁面不能訪問的情況，而直接導致自己網站不能正常訪問，或者訪問速度比較慢。
比如：某個網站為 頭、內容、底 結構，在網站的頭部放置了第三方提供的廣告，但是出于某種原因，第三方的服務不能正常訪問了，直接導致的情況就是，整個網站 頭部廣告 以下的部分均不能正常訪問（或者要過很久以后才能打開，昨天的臺灣大地震，導致了 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;">
<!-- 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>這里是頁面最重要的內容，您每次打開該頁面，均希望該部分內容無論如何可以正常顯示。</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>
posted on 2007-12-21 16:14
末日風情 閱讀(968)
評論(1) 編輯 收藏 所屬分類:
javascript