IE高版本及其他瀏覽器的加載

1、 處理頁面文檔加載的時(shí)候，我們遇到一個(gè)難題，就是使用window.onload 這種將所有內(nèi)容加載后（包括DOM 文檔結(jié)構(gòu)，外部腳本、樣式，圖片音樂等）這樣會(huì)導(dǎo)致在長時(shí)間加載頁面的情況下，JS 程序是不可用的狀態(tài)。而JS其實(shí)只需要HTML DOM 文檔結(jié)構(gòu)構(gòu)造完畢之后就可以使用了，沒必要等待諸如圖片音樂和外部內(nèi)容加載。
2、非IE 瀏覽器提供了一種加載事件：DOMContentLoaded 事件，這個(gè)事件可以在完成HTML DOM結(jié)構(gòu)之后就會(huì)觸發(fā)，不會(huì)理會(huì)圖像音樂、JS 文件、CSS文件或其他資源是否已經(jīng)下載完畢。目前支持DOMContentLoaded 事件瀏覽器有：IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持。

window.onload

window.onload=function(){
//執(zhí)行代碼
}

DOMContentLoaded

if (document.addEventListener) { //DOM 結(jié)構(gòu)加載完畢
 document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
}

模擬DOMContentLoaded

一個(gè)document 的Document.readyState屬性描述了文檔的加載狀態(tài)。
一個(gè)文檔的 readyState 可以是以下之一：
1、loading / 加載
document 仍在加載。
2、interactive / 互動(dòng)
文檔已經(jīng)完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在加載.
3、complete / 完成
T文檔和所有子資源已完成加載。狀態(tài)表示 load事件即將被觸發(fā)。 當(dāng)這個(gè)屬性的值變化`時(shí)，document對象上的readystatechange事件將被觸發(fā)。

// 模擬 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
}

// 模擬 load/onload 事件
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
}

問題：在IE 瀏覽器如果網(wǎng)頁上有<iframe>加載另一個(gè)網(wǎng)頁，我們發(fā)現(xiàn)IE瀏覽器還需要加載完畢iframe 所有的內(nèi)容才可以執(zhí)行。而非IE瀏覽器的DOMContentLoaded事件則還是DOM加載完畢后就執(zhí)行了，在這里我們就發(fā)現(xiàn)IE 的這種方式并不完美，當(dāng)然，如果頁面沒有iframe的話就夠用了。

解決：在IE中，任何DOM元素都有一個(gè)doScroll方法，無論它們是否支持滾動(dòng)條。為了判斷DOM 樹是否建成，我們只看看documentElement 是否完整就是，因?yàn)椋鳛樽钔鈱拥脑?，作?code>DOM樹的根部而存在，如果documentElement完整的話，就可以調(diào)用doScroll。當(dāng)頁面一加載JS 時(shí)，我們就執(zhí)行此方法，當(dāng)然要如果documentElement 還不完整就會(huì)報(bào)錯(cuò)，我們在catch 塊中重新調(diào)用它，一直到成功執(zhí)行，成功執(zhí)行時(shí)就可以調(diào)用fn 方
法了
方法了。

//使用doScroll()來判斷DOM 加載完畢
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll('left');
//要執(zhí)行的內(nèi)容
fn()
} catch (ex) {};

});

參考資料
DOMContentLoaded
document.onreadystatechange