頁面 DOM 和瀏覽器載入

這是一個解釋負載事件變化的示例。

  1. onload 事件
<body onload="someFunction()">
<img src="image1" />
<img src="image2" />
</body>

<script>
    function someFunction() {
    console.log("Hi! I am loaded");
}
</script>

在這種情況下,一旦頁面的所有內容(包括影象和樣式表(如果有)) 被完全載入,就會記錄訊息。

  1. DOMContentLoaded 事件

    document.addEventListener("DOMContentLoaded", function(event) {
        console.log("Hello! I am loaded");
    });
    

在上面的程式碼中,僅在載入 DOM /文件之後才記錄訊息( 即:一旦構造了 DOM )。

  1. 自我呼叫匿名函式

    (function(){
        console.log("Hi I am an anonymous function! I am loaded");
    })();
    

這裡,一旦瀏覽器解釋匿名函式,就會記錄訊息。這意味著,即使在載入 DOM 之前,此函式也可以執行。