DOMContentLoaded、ready、load事件的區別

 

DOM文檔加載的順序

1. 解析HTML結構
2. 加載腳本和樣式表文件
3. 解析並執行腳本代碼
4. DOM樹構建完成 // DOMContentLoaded
5. 加載圖片、視頻等外部文件
6. 頁面加載完畢 // load

ready

當 DOM（文檔對象模型） 已經加載，並且頁面（包括圖像）已經完全呈現時，會發生 ready 事件。

由於該事件在文檔就緒后發生，因此把所有其他的 jQuery 事件和函數置於該事件中是非常好的做法。

DOMContentLoaded 

當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像、腳本、子框架的完全加載。

注意：DOMContentLoaded 事件必須等待其所屬script之前的樣式表加載解析完成才會觸發。 

load

當整個頁面及所有依賴資源如樣式表、圖片、腳本都已完成加載時，將觸發load事件。