jQuery - $(document).ready 和 $(window).load 之间有什么区别？

jQuery - What are differences between $(document).ready and $(window).load?

提问by hungneox

What are differences between

之间有什么区别

$(document).ready(function(){
 //my code here
});

and

和

$(window).load(function(){
  //my code here
});

---

---

And I want to make sure that:

我想确保：

$(document).ready(function(){

}) 

and

和

$(function(){

}); 

and

和

jQuery(document).ready(function(){

});

are the same.

是相同的。

Can you tell me what differences and similarities between them?

你能告诉我它们之间有什么区别和相似之处吗？

回答by Oyeme

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Query 3.0 version

查询3.0版本

Breaking change: .load(), .unload(), and .error() removed

重大更改： .load()、.unload() 和 .error() 已删除

These methods are shortcuts for event operations, but had several API limitations. The event .load()method conflicted with the ajax .load()method. The .error()method could not be used with window.onerrorbecause of the way the DOM method is defined. If you need to attach events by these names, use the .on()method, e.g. change $("img").load(fn)to $(img).on("load", fn).¹

这些方法是事件操作的快捷方式，但有几个 API 限制。事件.load()方法与ajax.load()方法冲突。 由于 DOM 方法的定义方式，该.error()方法无法使用window.onerror。如果您需要通过这些名称附加事件，请使用该.on()方法，例如更改 $("img").load(fn)为$(img).on("load", fn). ¹

$(window).load(function() {});

Should be changed to

应该改为

$(window).on('load', function (e) {})

These are all equivalent:

这些都是等价的：

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

回答by bighearted

document.readyis a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onloadfires later (or at the same time in the worst/failing cases) when images and 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加载图像等时稍后触发（或在最坏/失败的情况下同时触发）。因此，例如，如果您使用图像尺寸，您通常希望使用它。

Also read a related question:
Difference between $(window).load() and $(document).ready() functions

另请阅读相关问题：
Difference between $(window).load() and $(document).ready() functions

回答by Rifat

From the jQuery API Document

来自jQuery API 文档

While JavaScript provides the loadevent 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.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the loadevent instead.

虽然 JavaScript 提供了load在呈现页面时执行代码的事件，但在完全接收到所有资产（例如图像）之前不会触发此事件。在大多数情况下，一旦完全构建了 DOM 层次结构，就可以运行脚本。传递给的处理程序.ready()保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。使用依赖于 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

如果代码依赖于加载的资产（例如，如果需要图像的尺寸），则应将代码放置在load事件的处理程序中。

---

---

Answer to the second question -

回答第二个问题——

No, they are identical as long as you are not using jQuery in no conflict mode.

不，只要您不在无冲突模式下使用 jQuery，它们就是相同的。

回答by Bharat Chodvadiya

This three function are the same.

这三个功能是一样的。

$(document).ready(function(){

}) 

and

和

$(function(){

}); 

and

和

jQuery(document).ready(function(){

});

here $is used for define jQuerylike $= jQuery.

这里$用于定义jQuerylike $= jQuery。

Now difference is that

现在不同的是

$(document).readyis jQuery event that is fired when DOMis loaded, so it's fired when the document structure is ready.

$(document).ready是在DOM加载时触发的 jQuery 事件，因此在文档结构准备好时触发。

$(window).loadevent is fired after whole content is loaded like page contain images,css etc.

$(window).load加载整个内容后触发事件，如页面包含图像、CSS 等。

回答by Shubham Kumar

The Difference between $(document).ready()and $(window).load()functions is that the code included inside $(window).load()will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the document readyevent fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.

$(document).ready()和$(window).load()函数之间的区别在于，$(window).load()一旦加载了整个页面（图像、iframe、样式表等），其中包含的代码将运行，而文档就绪事件在加载所有图像、iframe 等之前触发，但在整个 DOM 本身之后触发准备好了。

---

---

$(document).ready(function(){

}) 

and

和

$(function(){

});

and

和

jQuery(document).ready(function(){

});

There are not difference between the above 3 codes.

以上3个代码没有区别。

They are equivalent,but you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $as a shortcut name.

它们是等价的，但是如果任何其他 JavaScript 框架使用相同的美元符号$作为快捷方式名称，您可能会遇到冲突。

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

回答by Kumar Immanuel

The ready event is always execute at the only html page is loaded to the browser and the functions are executed.... But the load event is executed at the time of all the page contents are loaded to the browser for the page..... we can use $ or jQuery when we use the noconflict() method in jquery scripts...

ready 事件总是在只有 html 页面加载到浏览器并执行函数时执行。 .. 当我们在 jquery 脚本中使用 noconflict() 方法时，我们可以使用 $ 或 jQuery ...

回答by Pavan Hukerikar

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

回答by Srikrushna

$(window).loadis an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it.

$(document).ready()indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.

$(window).load是一个事件，当 DOM 和页面上的所有内容（所有内容）像 CSS、图像和框架一样完全加载时会触发。一个最好的例子是，如果我们想要获得实际的图像大小或获得我们使用它的任何东西的细节。

$(document).ready()表示一旦 DOM 加载完毕并准备好被脚本操作，就需要执行其中的代码。它不会等待图像加载来执行 jQuery 脚本。

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).load fired after the $(document).ready().

$(window).load 在 $(document).ready() 之后触发。

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Above 3 are same, $ is the alias name of jQuery, you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $. If u face conflict jQuery team provide a solution no-conflictread more.

$(window).load was deprecated in 1.8, and removed in jquery 3.0

上面3个都是一样的，$是jQuery的别名，如果其他JavaScript框架使用相同的美元符号$，你可能会遇到冲突。如果您遇到冲突，jQuery 团队会提供无冲突的解决方案阅读更多内容。

$(window).load 在 1.8 中被弃用，在 jquery 3.0 中被移除