JavaScript DOM 就緒

Harshit Jindal 2023年1月30日 2021年4月29日
  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 處理程式快得多,因為它不等待影象完全載入。
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