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

Question

有什么区别

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

和

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

---

我想确保:

$(document).ready(function(){

}) 

和

$(function(){

}); 

和

jQuery(document).ready(function(){

});

是相同的.

你能告诉我他们之间有什么不同和相似之处吗？

Answer 1

$(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>

查询3.0版本

中断更改:.load(),. unload()和.error()已删除

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

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

应该改为

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

这些都是等价的:

$(function(){
}); 

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

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

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

Answer 2

document.ready是一个jQuery事件,它在DOM准备就绪时运行,例如,所有元素都可以找到/使用,但不一定是所有内容.
window.onload当图像等被加载时,稍后(或在最坏/失败的情况下同时)发射.因此,如果您正在使用图像尺寸,则通常需要使用此尺寸.

另请阅读相关问题:
$(window).load()和$(document).ready()函数之间的区别

Answer 3

来自jQuery API文档

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

如果代码依赖于加载的资源(例如,如果需要图像的维度),则应将代码放在load事件的处理程序中.

回答第二个问题 -

不,只要你没有在冲突模式下使用jQuery,它们就是相同的.

Answer 4

这三个功能是相同的.

$(document).ready(function(){

}) 

和

$(function(){

}); 

和

jQuery(document).ready(function(){

});

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

现在区别在于

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

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

Answer 5

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

$(document).ready(function(){

}) 

和

$(function(){

});

和

jQuery(document).ready(function(){

});

以上3个代码没有区别。

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

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

Answer 6

$(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"); 
});