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 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