Javascript DOMContentLoaded 和 load 事件的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2414750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between DOMContentLoaded and load events
提问by Viktor
What is the difference between DOMContentLoadedand loadevents?
DOMContentLoaded和load事件和有什么不一样？
采纳答案by Simon Lieschke
From the Mozilla Developer Center:
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
DOMContentLoaded 事件在文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（加载事件可用于检测完全加载的页面）。
回答by CMS
The DOMContentLoadedevent will fire as soon as the DOM hierarchy has been fully constructed, the loadevent will do it when all the images and sub-frames have finished loading.
该DOMContentLoaded事件将在 DOM 层次结构完全构建后立即触发，该load事件将在所有图像和子帧加载完成后执行。
DOMContentLoadedwill work on most modern browsers, but not on IEincluding IE9 and above. There are some workaroundsto mimic this event on older versions of IE, like the used on the jQuery library, they attach the IE specificonreadystatechangeevent.
DOMContentLoaded将适用于大多数现代浏览器，但不适用于 IE，包括 IE9 及更高版本。有一些变通方法可以在旧版本的 IE 上模拟此事件，例如在 jQuery 库中使用的方法，它们会附加IE 特定onreadystatechange事件。
回答by Mehrad Sadegh
See the difference yourself:
自己看看区别：
From Microsoft IE
来自微软 IE
The DOMContentLoaded event fires when parsing of the current page is complete; the load event fires when all files have finished loading from all resources, including ads and images. DOMContentLoaded is a great event to use to hookup UI functionality to complex web pages.
DOMContentLoaded 事件在当前页面解析完成时触发；当所有文件从所有资源（包括广告和图像）加载完毕后，将触发 load 事件。DOMContentLoaded 是一个很好的事件，用于将 UI 功能连接到复杂的网页。
From Mozilla Developer Network
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
DOMContentLoaded 事件在文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（加载事件可用于检测完全加载的页面）。
回答by Anderson
DOMContentLoaded==window.onDomReady()
DOMContentLoaded==window.onDomReady()
Load==window.onLoad()
Load==window.onLoad()
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
在文档“准备好”之前，不能安全地操作页面。jQuery 会为您检测这种准备状态。$( document ).ready() 中包含的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。包含在 $( window ).load(function() { ... }) 中的代码将在整个页面（图像或 iframe）准备好后运行，而不仅仅是 DOM。
See: http://learn.jquery.com/using-jquery-core/document-ready/
请参阅：http: //learn.jquery.com/using-jquery-core/document-ready/
回答by skube
domContentLoaded: marks the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution - meaning we can now (potentially) construct the render tree. Many JavaScript frameworks wait for this event before they start executing their own logic. For this reason the browser captures the EventStart and EventEnd timestamps to allow us to track how long this execution took.
loadEvent: as a final step in every page load the browser fires an “onload” event which can trigger additional application logic.
domContentLoaded：标记 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点——这意味着我们现在可以（可能）构建渲染树。许多 JavaScript 框架在开始执行自己的逻辑之前会等待此事件。出于这个原因，浏览器会捕获 EventStart 和 EventEnd 时间戳，以允许我们跟踪此执行所花费的时间。
loadEvent：作为每个页面加载的最后一步，浏览器会触发“onload”事件，该事件可以触发额外的应用程序逻辑。
