首頁 > web前端 > js教程 > 不使用jQuery如何實作$(document).ready()的功能?

不使用jQuery如何實作$(document).ready()的功能?

DDD
發布: 2024-11-05 01:33:02
原創
461 人瀏覽過

How to Achieve the Functionality of $(document).ready() Without jQuery?

$(document).ready()**

中的$(document).ready() 函數的非jQuery 等效項jQuery 通常用於在DOM 完全載入後執行程式碼。然而,在某些情況下,使用 jQuery 可能不理想或不可用。在這種情況下,需要一個非 jQuery 等效項。

答案

$(document).ready() 的非jQuery 等效項是document.addEventListener( “DOMContentLoaded”,函數(){...} )。此函數將一個事件偵聽器附加到 DOMContentLoaded 事件,該事件在 DOM 樹完全建構時被觸發。放置在事件監聽器內的程式碼將在 DOM 準備好後執行。

與 window.onload 的區別

注意 window.onload 與 $( 不同文件).ready()。 window.onload 僅等待所有元素完全加載,包括圖像和腳本等外部資源。相比之下, $(document).ready() 只等待 DOM 樹準備好,通常速度更快。

IE8 及更早版本支援

對於瀏覽器早於IE8,DOMContentLoaded 的替代方法是使用document.onreadystatechange 並滿足以下條件:

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}
登入後複製

其他選項除了DOMContentLoaded,還有其他事件監聽器可用於處理DOM 載入。有關更多詳細信息,請參閱 Mozilla 開發者網路 (MDN) 文件。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板