DOMContentLoaded事件解析

         

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

 

 

      過去,當一個頁面完成加載時,初始化腳本的方法是使用load事件,但這個類函數的缺點是僅在全部資源都徹底加載後才被觸發,這有時會致使比較嚴重的延遲,開發人員隨後建立了一種自定義事件,domready,它在DOM加載以後及資源加載以前被觸發. domready事件迅速被衆多JavaScript庫所採用,它開始在本地瀏覽器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被標準化,下面的代碼顯示了DOMContentLoaded是如何在document對象中被觸發的;document.addeventListener('DOMContentLoaded',function(){...},false);值得注意的是,這個網站的行爲層能夠被更快速地啓動,這意味着用戶能夠更快開始瀏覽網站,這對於鏈接速度慢的網絡或者包含大量圖片並須要一些時間加載圖片的網頁來講特別重要,若是隻想在全部資源都完成加載以後運行腳本, 那麼仍然可使用load.