jQuery $(window).load() 和 $(document).ready() 函数的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4584373/
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 $(window).load() and $(document).ready() functions
提问by Satya
What is the difference between $(window).load(function() {})and $(document).ready(function() {})in jQuery?
jQuery$(window).load(function() {})和$(document).ready(function() {})jQuery 中有什么区别？
回答by Nick Craver
document.readyis a jQuery event, it runs when the DOM is ready, e.g. all elementsare there to be found/used, but not necessarily all content.window.onloadfires later (or at the same time in the worst/failing cases) when imagesand such are loaded, so if you're using image dimensions for example, you often want to use this instead.
document.ready是一个 jQuery 事件，它在 DOM 准备好时运行，例如所有元素都可以找到/使用，但不一定是所有内容。window.onload加载图像等时稍后触发（或在最坏/失败的情况下同时触发），因此，例如，如果您使用图像尺寸，您通常想改用它。
回答by SagarPPanchal
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
回答by Kean Amaral
The $(window).load()is NOT available in jQuery 3.0
在$(window).load()jQuery的3.0不可用
$( window ).load(function() {
// Handler for .load() called.
});
To get around it, you can use it as an "Event Handler Attachment"
要绕过它，您可以将其用作“事件处理程序附件”
$( window ).on("load", function() {
// Handler for .load() called.
});
回答by Bharat Chodvadiya
The difference are:
区别在于：
$(document).ready(function() {is jQuery event that is fired when DOM is loaded, so it's fired when the document structure is ready.
$(document).ready(function() {是加载 DOM 时触发的 jQuery 事件，因此在文档结构准备好时触发。
$(window).load()event is fired after whole content is loaded.
$(window).load()加载整个内容后触发事件。
回答by Shaik Rasool
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
alert( "document loaded" );
});
$( window ).load(function() {
alert( "window loaded" );
});
</script>
</head>
<body>
<iframe src="http://stackoverflow.com"></iframe>
</body>
</html>
window.load will be triggered after all the iframe content is loaded
window.load 将在所有 iframe 内容加载后触发
回答by Purvik Dhorajiya
$(document).readyhappens when all the elements are present in the DOM, but not necessarily all content.
$(document).ready当所有元素都存在于 DOM 中时发生，但不一定是所有内容。
$(document).ready(function() {
alert("document is ready");
});
window.onloador $(window).load()happens after all the content resources (images, etc) have been loaded.
window.onload或$(window).load()在所有内容资源（图像等）加载后发生。
$(window).load(function() {
alert("window is loaded");
});
回答by fantactuka
From jquery prospective - it's just adding load/onloadevent to window and document.
Check this out:
从 jquery 的角度来看 - 它只是将load/onload事件添加到窗口和文档中。看一下这个：
回答by Jones Agyemang
According to DOM Level 2 Events, the load event is supposed to fire on document, not on window. However, load is implemented on window in all browsers for backwards compatibility.
根据 DOM Level 2 Events，加载事件应该在文档上触发，而不是在窗口上触发。但是，为了向后兼容，所有浏览器的窗口都实现了加载。
回答by user8816619
I think the $(window).loadevent is not supported by JQuery 3.x
我认为$(window).loadJQuery 3.x 不支持该事件
回答by Arun Kumar
document.ready (jQuery)document.ready will execute right after the HTML document is loaded property, and the DOM is ready.
document.ready (jQuery)document.ready 将在 HTML 文档加载属性后立即执行，并且 DOM 准备就绪。
DOM: The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
DOM：文档对象模型 (DOM) 是一种跨平台且独立于语言的约定，用于表示 HTML、XHTML 和 XML 文档中的对象并与之交互。
$(document).ready(function()
{
// executes when HTML-Document is loaded and DOM is ready
alert("(document).ready was called - document is ready!");
});
window.load (Built-in JavaScript)The window.load however will wait for the page to be fully loaded, this includes inner frames, images etc. * window.load is a built-in JavaScript method, it is known to have some quirks in old browsers (IE6, IE8, old FF and Opera versions) but will generally work in all of them.
window.load (Built-in JavaScript)然而 window.load 会等待页面完全加载，这包括内部框架、图像等。 * window.load 是一个内置的 JavaScript 方法，众所周知有一些在旧浏览器（IE6、IE8、旧 FF 和 Opera 版本）中的怪癖，但通常适用于所有浏览器。
window.load can be used in the body's onload event like this (but I would strongly suggest you avoid mixing code like this in the HTML, as it is a source for confusion later on):
window.load 可以像这样在 body 的 onload 事件中使用（但我强烈建议你避免在 HTML 中混合这样的代码，因为它是以后混淆的来源）：
$(window).load(function()
{
// executes when complete page is fully loaded, including all frames, objects and images
alert("(window).load was called - window is loaded!");
});
