Javascript $(window).load 和 $(document).ready 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5182016/
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
What is the difference between $(window).load and $(document).ready?
提问by Mark McCook
I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my $(document).ready()and putting it within $(window).load()fixed the problem.
我最近在使用 JavaScript 代码时遇到问题，从我的代码中取出一部分代码$(document).ready()并将其放入$(window).load()解决了问题。
Now I understand that window.loadis fired just after document.ready, but why is it not ready after document.ready, that is after window.load()?
现在我明白window.load是在之后被解雇了document.ready，但为什么之后还没有准备好document.ready，那就是之后window.load()？
回答by Martin Jespersen
loadis called when all assets are done loading, including images. readyis fired when the DOM is ready for interaction.
load当所有资产加载完成时调用，包括图像。ready当 DOM 准备好交互时触发。
From the MDC, window.onload:
从 MDC，window.onload：
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片和子框架都已经加载完毕。
From the jQuery API documentation, .ready( handler ):
来自 jQuery API 文档，.ready( handler )：
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
虽然 JavaScript 提供了用于在呈现页面时执行代码的 load 事件，但在完全接收到所有资产（例如图像）之前不会触发此事件。在大多数情况下，一旦完全构建了 DOM 层次结构，就可以运行脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。使用依赖于 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。
回答by Mario Fink
$(document).ready()means that the DOM of your page is ready to be manipulated.
$(document).ready()意味着您的页面的 DOM 已准备好进行操作。
window.load()is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.
window.load()当整个页面（包括 CSS 和图像文件等组件）完全加载时触发。
What are you trying to achieve?
你想达到什么目的？
回答by SimonGates
$(document).ready(function(){
//code here
});
The code above is used almost every time when we work with jQuery.
上面的代码几乎每次我们使用jQuery.
This code is used when we want to initialize our jQuerycodes after the DOM is ready.
当我们想jQuery在 DOM 准备好后初始化我们的代码时使用此代码。
$(window).load()
Sometimes you want to manipulate pictures. For example you want to vertically and horizontally align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready()you won't be able to do that if the visitor doesn't have the image already loaded, in which case you need to initialize the jqueryalignment function when the image finishes loading. That's where we use $(window).load()
有时您想处理图片。例如，您想要垂直和水平对齐图片，并且您需要获取图片的宽度和高度才能做到这一点。随着$(document).ready()你将不能够这样做，如果游客不具有已加载的图像，在这种情况下，你需要初始化jquery当图像完成加载对准功能。这就是我们使用的地方$(window).load()
回答by Bharat Chodvadiya
$(document).readyis jQueryevent that is fired when DOM is loaded, so it's fired when the document structure is ready.
$(document).ready是jQuery加载 DOM 时触发的事件，因此在文档结构准备好时触发。
$(window).loadevent is fired after whole content (including css, images etc..) is loaded.
$(window).load在加载整个内容（包括 css、图像等）后触发事件。
This is major difference.
这是主要区别。
回答by xicooc
$(document).ready()is wrap DOM in <body>...</body>
$(document).ready()将 DOM 包裹在 <body>...</body>
$(window).load()is papa of document wrap all DOM in <html>...</html>
$(window).load()是文档的爸爸将所有 DOM 包装在 <html>...</html>
Let's use in your case to save render processing.
让我们在您的情况下使用来保存渲染处理。
回答by Yamini Upadhyay
In simple words, window.loadis called when all content of window is loaded whereas document.readyis called when DOM is loaded and document structure is ready.
简单来说，window.load在加载窗口的所有内容时调用，而document.ready在加载 DOM 并且文档结构准备好时调用。
回答by ankit sahu
$(document).ready is slider fast in comparison $(window).load Event.
$(document).ready is fire when Dom is load but $(window).load Event fire when Dom ,css and images fully loaded.
与 $(window).load 事件相比，$(document).ready 是滑块快。
$(document).ready 在 Dom 加载时触发，但 $(window).load 事件在 Dom、css 和图像完全加载时触发。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function () {
var img = $('#img1');
alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>回答by asmitB
Load state is the state when the window object has been created and all necessary components including DOM has been loaded in memory, but has not been passed to the rendering engine for rendering the same in page.
加载状态是当 window 对象已经创建并且包括 DOM 在内的所有必要组件都已加载到内存中时的状态，但尚未传递给渲染引擎以在页面中渲染相同的组件。
Ready state on the other hand makes it sure that the DOM elements, events and other dependent components are passed on to the rendering engine, rendered on page, and is ready for interaction and manipulation.
另一方面，就绪状态确保 DOM 元素、事件和其他依赖组件被传递到渲染引擎，在页面上渲染，并准备好进行交互和操作。
回答by Seema Gupta
$(document).readyis a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's html DOM. This event is fired before all the images, css etc. are fully loaded.
$(document).ready是一个 jQuery 事件。一旦 DOM 加载并准备好由脚本操作，它就会触发。这是页面加载过程中脚本可以安全访问页面 html DOM 中元素的最早点。在所有图像、CSS 等完全加载之前触发此事件。
window.load()is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.
window.load()当整个页面（包括 CSS 和图像文件等组件）完全加载时触发。
