jquery中ready()函数执行的时机和window的load事件比较

深入理解jQuery中的ready()函数与window的load事件：DOM加载的两种不同时机

在web开发中，我们经常需要等待DOM加载完成后再执行某些操作。在jQuery中，我们可以使用ready()函数或者绑定DOMContentLoaded事件来实现这一目标。与此相对的是window的load事件，它在所有资源（如图片、脚本等）都加载完成后触发。两者的区别和使用场景，让我们一起来下。

让我们看看jQuery的ready()函数的实现原理。这个函数主要是用来处理DOM准备就绪的情况。如果DOM还未准备好，它会等待直到DOM准备就绪。一旦DOM就绪，就会执行所有绑定在ready()函数上的回调函数。这个过程主要对应的是DOMContentLoaded事件。值得注意的是，在DOM加载完成但图片、样式等资源还未完全加载时，就会触发DOMContentLoaded事件，使用ready()函数时，需要考虑到资源尚未完全加载的情况。

接下来是window的load事件。与DOMContentLoaded事件不同，load事件会在所有资源（包括图片、脚本等）都加载完成后触发。如果你的代码需要在所有资源都加载完成后才能运行，那么应该使用window的load事件。

让我们看一下jQuery中ready()函数的代码实现：

```javascript

// 处理DOM准备就绪的情况

ready: function() {

// 确保DOM还未准备就绪

if (!jQuery.isReady) {

// 确保body存在（至少针对IE浏览器过度热衷的情况）

if (!document.body) {

return setTimeout(jQuery.ready, 13); // 延迟执行ready函数

}

// 记录DOM已准备就绪

jQuery.isReady = true;

// 如果有已绑定的函数需要执行

if (readyList) {

// 执行所有绑定的函数

var fn, i = 0;

while ((fn = readyList[i++])) {

fn.call(document, jQuery);

}

// 重置函数列表

readyList = null;

}

// 触发所有绑定的ready事件

if (jQuery.fn.triggerHandler) {

jQuery(document).triggerHandler('ready');

}

}

},

```

以上就是关于jQuery中ready()函数和window的load事件的全部内容。希望这篇文章能帮助你更好地理解这两个概念，并在实际开发中合理使用它们。如果你有任何疑问或建议，欢迎提出。让我们一起学习进步！