jQuery中$(document).ready与Javascript中window.onload区别

来源：互联网发布：php设置session有效期编辑：程序博客网时间：2024/05/20 00:53

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先执行。

如有不对的地方，请多指定，更多信息，文章来自这里

0 0