DOMContentLoaded和加载事件之间的区别

DOMContentLoaded和加载事件有什么区别？

Answer 1

从Mozilla开发者中心 ：

DOMContentLoaded事件在文档被完全加载和parsing时触发，不需要等待样式表，图像和子帧完成加载（加载事件可以用来检测完全加载的页面）。

Answer 2

只要DOM层次结构完全构build， DOMContentLoaded事件就会触发，当所有的图像和子帧完成加载时， load事件将会执行。

这个事件将适用于大多数现代浏览器， 但不包括IE9以上的IE浏览器。 有一些解决方法来模仿IE的老版本的这个事件，就像在jQuery库中使用的那样，它们附加IE特定的 onreadystatechange事件。

Answer 3

看你自己的差异：

DEMO

来自微软IE

DOMContentLoaded事件在当前页面parsing完成时触发; 当所有文件从所有资源（包括广告和图像）加载完成时，加载事件触发。 DOMContentLoaded是一个很好的事件，用来将UIfunction连接到复杂的网页。

从Mozilla开发者networking

DOMContentLoaded事件在文档被完全加载和parsing时触发，不需要等待样式表，图像和子帧完成加载（加载事件可以用来检测完全加载的页面）。

Answer 4

DOMContentLoaded == window.onDomReady()

Load == window.onLoad()

在文档“准备就绪”之前，不能安全地操作页面。 jQuery为您检测到这种状态。 包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。 包含在$（window）.load（function（）{…}）中的代码将在整个页面（图像或iframe）运行，而不仅仅是DOM准备就绪。

请参阅： http : //learn.jquery.com/using-jquery-core/document-ready/

Answer 5

• domContentLoaded ：当DOM已经准备就绪，并且没有阻止JavaScript执行的样式表时，标志着这一点 – 这意味着我们现在可以（可能）构造渲染树。 许多JavaScript框架在开始执行自己的逻辑之前等待这个事件。 由于这个原因，浏览器捕获了EventStart和EventEnd时间戳，以便我们跟踪执行的时间。

• loadEvent ：作为每个页面加载的最后一步，浏览器触发一个“onload”事件，这个事件可以触发额外的应用程序逻辑。

资源