JavaScript DOM 就緒

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

網站的載入從下載 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 處理程式快得多,因為它不等待影象完全載入。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者: Harshit Jindal
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

相關文章 - JavaScript DOM