jQuery中onload與ready區別

陌少臣發表於2021-11-02

onload和ready的區別
document.ready和onload的區別為:載入程度不同、執行次數不同、執行速度不同。
1、載入程度不同

document.ready:是DOM結構繪製完畢後就執行,不必等到載入完畢。意思就是DOM樹載入完畢就執行,不必等到頁面中圖片或其他外部檔案都載入完畢。

onload:是頁面所有元素都載入完畢,包括圖片等所有元素。

2、執行次數不同

document.ready可以寫多個.ready,可以執行多次,第N次都不會被上一次覆蓋。

onload只能執行一次,如果有多個,那麼第一次的執行會被覆蓋。

3、執行速度不同

onload除了要等待DOM被建立還要等到包括大型圖片、音訊、視訊在內的所有外部資源都完全載入。如果載入圖片和媒體內容花費了大量時間,使用者就會感受到定義在onload事件上的程式碼在執行時有明顯的延遲。

document.ready函式只需對 DOM 樹的等待,而無需對影像或外部資源載入的等待,從而執行起來更快。

相關文章