如何控制頁面內(nèi)容的加載順序_網(wǎng)頁設(shè)計教程
推薦：富媒體廣告設(shè)計之銳智MOTO RAZR V8黃金典藏版點擊欣賞該廣告廣告制作：互動通www.hdtworld.com廣告背景：2007年5月，摩托羅拉正式推出內(nèi)存為2GB的新版V8系列，其中“黃金甲附體”的黃金典藏版，更被譽
轉(zhuǎn)載 http://bbl456.blog.sohu.com/72162079.html
目前網(wǎng)站之間相互調(diào)用的情況越來越多，比如 需要調(diào)用某個第三方提供的一些接口（天氣預告），或者是第三方提供的廣告......
但是出于各種原因（網(wǎng)絡(luò)故障、服務(wù)器故障、軟件故障......）經(jīng)常會發(fā)生第三方的相應(yīng)頁面不能訪問的情況，而直接導致自己網(wǎng)站不能正常訪問，或者訪問速度比較慢。
比如：某個網(wǎng)站為頭、內(nèi)容、底 結(jié)構(gòu)，在網(wǎng)站的頭部放置了第三方提供的廣告，但是出于某種原因，第三方的服務(wù)不能正常訪問了，直接導致的情況就是，整個網(wǎng)站 頭部廣告 以下的部分均不能正常訪問（或者要過很久以后才能打開，昨天的臺灣大地震，導致了 Google Adsense 不能正常訪問，直接導致了我的個人網(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)對象在當前頁面的載入狀態(tài)，當該對象完全載入以后，則當前對象的 readyState=="complete" ，借助該屬性，可以控制待當前頁面最期待的內(nèi)容載入完成以后，再載入有可能出錯的頁面（或者是優(yōu)先級不高的頁面）。
具體代碼如下：
問題頁面代碼：
<!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)容不能正常訪問，直接導致其下最重要的內(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>
修復頁面代碼：
<!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()
{
// 判定 當前頁面是否載入完畢
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)用如上方法, 當然,正常應(yīng)用應(yīng)該將此時間間隔設(shè)置小一些, 此處 僅 為了方便大家看效果
setInterval("showState()",2000);
</script>
<div>這里是頁面的最頂端內(nèi)容。</div>
<div>如下的 div1 div2 div3 div4 全部延時加載。 當前頁面中的最重要內(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>
分享：關(guān)于添刪改一個后臺操作的局部，關(guān)于對入池的詞組進行確認操作，需要代碼簡潔，操作方便，頁面瀏覽速度快，同時可批量操作。這是原始的版本優(yōu)點：在詞組較少的情況下，
- 中國互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會：打假，打出阿里的新未來
- 實踐分享：ACCESS數(shù)據(jù)庫導入mysql數(shù)據(jù)庫
- ACCESS數(shù)據(jù)庫轉(zhuǎn)ORACLE數(shù)據(jù)庫分享
- CDN.net免費CDN申請使用教程:100GB流量香港日本新加坡節(jié)點
- WordPress 教程：為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺教程（二） 消息管理與群發(fā)
- 中國IPv4地址今年將告罄 IPv6期待打破政策局
- 移動廣告野蠻成長：75%投放在iOS平臺
- 災(zāi)難面前，互聯(lián)網(wǎng)公司可以如何做的更好？
- 富士康500萬部iPhone遭蘋果退貨 損失10億元
- 相關(guān)鏈接：
- 教程說明：
網(wǎng)頁設(shè)計教程-如何控制頁面內(nèi)容的加載順序
。