如何使用 Vanilla JavaScript 實作 $(document).ready() 功能？

$(document).ready()的非 jQuery 替代品

行業標準 jQuery 庫提供了 $(document)。 Ready() 方法，使開發人員能夠在文件物件模型 (DOM) 完全載入後執行程式碼，確保所有元素均可存取且頁面內容已準備好進行操作。但是，在使用普通 JavaScript 時，此方法的替代方法是什麼？

答案：

$(document).ready() 的非 jQuery 等效項是透過事件監聽器實現。以下程式碼片段示範如何實現此功能：

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
    // code to be executed when the DOM is fully loaded
});</code>

此實作實作與 $(document).ready() 相同的結果，讓開發人員僅在 DOM 完成後執行程式碼。

其他注意事項：

雖然document.addEventListener("DOMContentLoaded") 提供了等待DOM 就緒的解決方案，但它在行為方面與window.onload 不同。 $(document).ready() 只等待 DOM 完成，而 window.onload 等待 DOM 和所有外部資源，包括映像和腳本。

舊版瀏覽器的替代方案( IE8 及以下版本）：

對於較舊的瀏覽器，例如Internet Explorer 8 及以下版本，可以使用以下替代方法：

<code class="javascript">document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // code to be executed when the DOM is fully loaded
    }
};</code>

請記住，除了“交互的。”有關更多信息，請參閱Mozilla 開發者網絡(MDN) 文檔。

以上是如何使用 Vanilla JavaScript 實作 $(document).ready() 功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！