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);