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事件。