JQuery中$(document).ready与Javascript中window.onload道理有什么区别呢？网上的说法很多，但是发现使用不同版本jquery，效果有完全不一样，很难去回答一下问题，我觉得有必要总结一下
1.window.onload到底是什么时候触发？
2.jQuery中ready到底是什么时候触发？
3.不同版本jQuery中$(document).ready的实现不同？
4. jQuery的ready，在什么时候触发？
5. jQuery的document ready比window.onload提前执行吗？
一、关于onload 事件
onload 事件会在页面或图像加载完成后立即发生。具体可以参考w3c
支持该事件的 HTML 标签：
body, frame, frameset, iframe, img, link, script
如我们可以让图片加载后，执行某个函数，代码如下：
|
1
2
3
|
document.getElementById(
'myimg'
).onload =
function
() {
console.log(
'By javascript img load'
);
};
|
支持该事件的 JavaScript 对象：
image, layer, window
二、window.onload到底是什么时候触发
window.onload,在文档装载完成后会触发，此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。可以参考MDN解释
三jQuery中ready到底是什么时候触发
JQuery中ready，即$(function(){})和$(document).ready(function(){}),主要是借助onreadystatechange和DOMContentLoaded来实现的。
在html标准中，对document的readyState。
Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.
The readystatechange event fires on the Document object when this value changes.
即document有loading、interactive、complete三种状态，状态变化，就会触发onreadystatechange。当document文档正在加载时,返回"loading"，即默认情况下。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。如下图：
所以，我们可以通过DOMContentLoaded模拟document的ready事件，如下：
|
1
2
3
|
document.addEventListener(
'DOMContentLoaded'
,
function
() {
//开始调用load事件
});
|
考虑到兼容性，具体可以参考这里，我们还需要使用onreadystatechange进行模拟
|
1
2
3
4
5
6
7
|
document.onreadystatechange =
function
() {
if
(document.readyState ==
"interactive"
) {
//开始调用load事件
}
else
if
(document.readyState ==
"complete"
) {
//开始调用onload事件
}
}
|
四、jQuery中是如何实现ready方法的呢？
下面是JQuery官方对ready函数的描述
ready( handler )
handler
Type: Function()
A function to execute after the DOM is ready.
但是自JQuery3.0开始，这个函数执行过程，已经发生了相应的变化。
|
1
2
3
4
5
6
|
$(document).ready(
function
() {
console.log(
'ready'
);
})
window.onload =
function
() {
console.log(
'load'
);
}
|
经测试，上面代码，有的时候，在jquery3.0之前版本执行的结果和JQuery3.0及之后的版本执行的结果正好先发。所以有必要做一下的分析
通过对比源码，发现，触发ready执行的条件，在jquery2.2.4和3.2.0中是一致的，如下：
|
1
2
3
4
5
6
7
8
9
10
|
if
( document.readyState ===
"complete"
||
( document.readyState !==
"loading"
&& !document.documentElement.doScroll ) ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );
}
else
{
// Use the handy event callback
document.addEventListener(
"DOMContentLoaded"
, completed );
// A fallback to window.onload, that will always work
window.addEventListener(
"load"
, completed );
}
|
那只能说明，在执行ready绑定的事件时候，jquery2.2.4和3.2.0有一定的差异。在jquery2.2.4中，ready比window.onload提前执行；在jQuery3.0及以后的版本中，若存在缓存，或是在document.readyState等于"interactive"之后，没有资源需要进一步加载的时候，window.onload比ready提前执行，否则ready先执行。
如有不对的地方，请多指定，更多信息，文章来自这里