onload 事件、DOMContentLoaded事件、DOM加載順序


1、onload 事件

定義與語法

onload事件會在頁面或者圖像加載完成后立即發生。

法:onload="SomeJavaScriptCode“;

參數:SomeJavaScriptCode    描述:必需。規定該事件發生時執行的 JavaScript。

支持該事件的 HTML 標簽:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持該事件的 JavaScript 對象:image, layer, window

實例

在本例中,文本 "Page is loaded" 會被顯示在狀態欄中:

<html> <head> <script type="text/javascript"> function load() { window.status="Page is loaded" } </script> </head> <body onload="load()"> </body> </html>

2、DOMContentLoaded事件 

這個事件是從HTML中的onLoad的延伸而來的,當一個頁面完成加載時,初始化腳本的方法是使用load事件,但這個類函數的缺點是僅在所有資源都完全加載后才被觸發,這有時會導致比較嚴重的延遲,開發人員隨后創建了一種自定義事件,domready,它在DOM加載之后及資源加載之前被觸發。

domready事件迅速被眾多JavaScript庫所采用,它開始在本地瀏覽器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被標准化,下面的代碼顯示了DOMContentLoaded是如何在document對象中被觸發的;
  document.addeventListener('DOMContentLoaded',function(){...},false);

3、DOM加載順序

1、解析HTML結構。

2、加載外部腳本和樣式表文件。

3、解析並執行腳本代碼。

4、構造HTML DOM模型。

5、加載圖片等外部文件。

6、頁面加載完畢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM