document.readyState和document.DOMContentLoaded判斷DOM的加載完成

document.readyState:判斷文檔是否加載完成。firefox不支持。

這個屬性是隻讀的，傳回值有如下的可能：

0-UNINITIALIZED：XML 對象被產生，但沒有任何文件被加載。
1-LOADING：加載程序進行中，但文件還沒有開始解析。
2-LOADED：部分的文件已經加載且進行解析，但對象模型還沒有生效。
3-INTERACTIVE：僅對已加載的部分文件有效，在此狀況下，對象模型是有效但只讀的。
4-COMPLETED：文件已徹底加載，表明加載成功。

document.onreadystatechange = subSomething;//當頁面加載狀態改變的時候執行這個方法.
function subSomething()
{
if(document.readyState == "complete"){ //當頁面加載狀態爲徹底結束時進入
//你要作的操做。
} 

else if(document.readyState=="loading"){

}

}

 

說明 ：onreadystatechange 事件能辨識readyState 屬性的改變。

 

----------------------------------------------------

firefox  DOMContentLoaded

---------------------------------------------------

今天查看百度空間源代碼，發現多了個util.js文件，打開看看。裏面裏面定義了addDOMLoadEvent。這是幹什麼用的？

仔細查看代碼，發如今Mozilla添加了DOMContentLoaded事件，這個在之前一直沒有用過。                    if (document.addEventListener)
                        document.addEventListener("DOMContentLoaded", init, false);

好像就是爲了兼容實現DOMContentLoaded事件。

網上找了點有關DOMContentLoaded的資料拿來看看。

DOMContentLoaded是firefox下特有的Event, 當全部DOM解析完之後會觸發這個事件。
    與DOM中的onLoad事件與其相近。但onload要等到全部頁面元素加載完成纔會觸發, 包括頁面上的圖片等等。
    若是頁面的圖片不少的話, 從用戶訪問到onload觸發可能須要較長的時間, 而在Ajax運用中, 經常須要在onload中加入許多初始化的動做, 若是因爲網絡問題引發的圖片加載過慢( 見: Ajax優化(2) -- lazierLoad img && js), 則必然影響用戶的體驗。
    在這種狀況下firefox的DOMContentLoaded事件, 偏偏是咱們須要的。

    目前,跨平臺的DOMContentLoaded的解決方案有不少, 好比jQuery, Prototype...等等, 其實現原理大同小異.

    在項目中, 我使用了Prototype工具, 以往調用初始化的方法是:

Event.observe(window, "load", init);

    如今有了DOMContentLoaded, 能夠替換成以下的方法:

document.observe('contentloaded', init);

    最新的prototype中自定義事件已經從新命名, 使用"dom:loaded" 代替了 「contentloaded」.

document.observe('dom:loaded', init);