JavaScript DOM 就緒

1. 使用 jQuery ready() 函式在 DOM 就緒時呼叫函式
2. DOM 準備就緒時使用 Vanilla JavaScript 方法呼叫函式

網站的載入從下載 HTML 文件開始。下載 HTML 文件後，將解析 HTML，並下載所需的資產。解析 HTML 之後，將同時呈現 DOM 和 CSS。此後，瀏覽器將處理 JavaScript 的 onload 功能。這是我們要呼叫函式的時間範圍，因為正確呈現了 HTML、CSS 和 DOM。本教程教你如何在 DOM 準備就緒時呼叫函式。

使用 jQuery ready() 函式在 DOM 就緒時呼叫函式

jQuery 中的 ready() 函式在 DOM 準備好時執行程式碼。它等待所有元素完全載入，然後嘗試訪問和操作它們。我們可以選擇 document 元素，一個空元素來呼叫函式，甚至直接呼叫一個函式。

$(document).ready(function() {
  // callback function / handler
});

它是完全跨瀏覽器相容的方法，可以在 HTML 程式碼中的任何位置呼叫。

DOM 準備就緒時使用 Vanilla JavaScript 方法呼叫函式

我們可以使用 DOMContentLoaded 事件來建立與 jQuery 的 ready() 函式等效的 JavaScript。我們可以為 DOMContentLoaded 新增一個事件監聽器，並使用該事件監聽器呼叫所需的函式。但是有一個陷阱，如果事件已經發生，則不會觸發回撥。因此，我們通過檢查文件物件的就緒狀態來照顧這種情況。

const callback = function() {};

if (document.readyState === 'complete' ||
    document.readyState === 'interactive') {
  setTimeout(callback, 1);
} else {
  document.addEventListener('DOMContentLoaded', callback);
}

除了這些方法之外，還有一些技巧可以幫助我們解決這個問題，但在所有情況下可能並不十分理想。

• 使用視窗的 onload 屬性呼叫 JavaScript 函式。
• 使用正文的 onload 屬性呼叫 JavaScript 函式。這種方法可能非常慢，因為它等待每個元素都被載入。
• 我們可以從主體的末端呼叫要執行的函式。在正文的最後，適當地渲染並準備好 DOM。因此，與任何元素相關的函式呼叫都沒有問題。它比正文 onload 處理程式快得多，因為它不等待影象完全載入。