溫馨提示×

細(xì)說document.ready和window.onload

小云
164
2023-09-23 06:12:38
欄目: 編程語言

document.ready是jQuery提供的一個函數(shù)，用于在文檔加載完成后執(zhí)行一些代碼。它相當(dāng)于JavaScript中的window.onload，但有一些區(qū)別。

  1. 執(zhí)行時機(jī)：

  • document.ready：在DOM樹構(gòu)建完成后即可執(zhí)行，不需要等待外部資源（如圖片）加載完成。

  • window.onload：需要等待頁面的所有資源加載完成后才能執(zhí)行，包括外部資源和圖片等。

  1. 代碼書寫：

  • document.ready：使用jQuery庫中的函數(shù)，代碼可以直接寫在一個回調(diào)函數(shù)中。

  • window.onload：需要在JavaScript中使用事件監(jiān)聽的方式來寫，或者在HTML中直接調(diào)用一個函數(shù)。

  1. 多次調(diào)用：

  • document.ready：可以多次調(diào)用，每次調(diào)用都會將新的函數(shù)添加到執(zhí)行隊列中。

  • window.onload：只能在頁面加載時調(diào)用一次，多次調(diào)用會覆蓋之前的事件。

  1. 兼容性：

  • document.ready：依賴于jQuery庫，只能在引入了jQuery庫的頁面中使用。

  • window.onload：原生JavaScript事件，幾乎在所有瀏覽器中都可以使用。

  1. 執(zhí)行順序：

  • document.ready：多個document.ready函數(shù)會按照調(diào)用順序依次執(zhí)行。

  • window.onload：多個window.onload函數(shù)會按照調(diào)用順序依次執(zhí)行。

總的來說，document.ready更適合在DOM加載完成后執(zhí)行一些操作，比如綁定事件、修改DOM元素等。而window.onload更適合在頁面所有資源加載完成后執(zhí)行一些操作，比如初始化一些需要依賴資源的組件、發(fā)送網(wǎng)絡(luò)請求等。

0 踩