JavaScriptwindow.onload和 jQuery 的$(document).ready()方法有什么区别？
window.onload vs $(document).ready()
IT技术
javascript
jquery
dom-events
unobtrusive-javascript
2020-12-18 16:37:44
6个回答
该ready事件发生在 HTML 文档被加载之后，而该onload事件发生在之后，当所有内容（例如图像）也已经被加载时。
该onload事件是 DOM 中的标准事件，而该ready事件是特定于 jQuery 的。该ready事件的目的是它应该在文档加载后尽早发生，以便为页面中的元素添加功能的代码不必等待所有内容加载完毕。
window.onload是内置的 JavaScript 事件，但由于它的实现在浏览器（Firefox、Internet Explorer 6、Internet Explorer 8 和Opera）之间有微妙的怪癖，jQuery 提供了，它将这些抽象出来，并在页面的 DOM 准备好后立即触发（不等待图像等）。document.ready
$(document).ready（请注意，它不是 document.ready，这是未定义的）是一个 jQuery 函数，包装并提供对以下事件的一致性：
document.ondomcontentready/document.ondomcontentloaded- 加载文档的 DOM 时触发的新事件（可能在加载图像等之前的一段时间）；再次，在 Internet Explorer 和世界其他地方略有不同- 和
window.onload（即使在旧浏览器中也实现），当整个页面加载（图像、样式等）时触发
$(document).ready()是一个 jQuery 事件。$(document).ready()一旦 DOM 准备好（这意味着浏览器已经解析了 HTML 并构建了 DOM 树），JQuery 的方法就会被调用。这使您可以在文档准备好进行操作时立即运行代码。
例如，如果浏览器支持 DOMContentLoaded 事件（就像许多非 IE 浏览器一样），那么它将在该事件上触发。（注意 DOMContentLoaded 事件仅在 IE9+ 中添加到 IE 中。）
为此可以使用两种语法：
$( document ).ready(function() {
console.log( "ready!" );
});
或者简写版本：
$(function() {
console.log( "ready!" );
});
要点$(document).ready()：
- 它不会等待图像加载。
- 用于在 DOM 完全加载时执行 JavaScript。将事件处理程序放在这里。
- 可以多次使用。
- 更换
$用jQuery，当你收到“$没有定义”。 - 如果要操作图像，则不使用。使用
$(window).load()来代替。
window.onload()是一个原生的 JavaScript 函数。window.onload()当页面上的所有内容都加载完毕时，该事件将触发，包括 DOM（文档对象模型）、横幅广告和图像。两者之间的另一个区别是，虽然我们可以拥有多个$(document).ready()功能，但我们只能拥有一个onload功能。
一个Windows负载事件触发时，所有的页面上的内容满载包括DOM（文档对象模型）的内容和异步的JavaScript，框架和图像。您也可以使用 body onload=。两者都是一样的；window.onload = function(){}并且<body onload="func();">是使用相同事件的不同方式。
jQuery$document.ready函数事件执行时间早于window.onloadDOM（文档对象模型）加载到您的页面后调用。它不会等待图像、帧完全加载。
摘自以下文章：
how $document.ready()is different fromwindow.onload()
一个小技巧：
始终使用window.addEventListener向窗口添加事件。因为这样您就可以在不同的事件处理程序中执行代码。
正确代码：
window.addEventListener('load', function () {
alert('Hello!')
})
window.addEventListener('load', function () {
alert('Bye!')
})无效的代码：
window.onload = function () {
alert('Hello!') // it will not work!!!
}
window.onload = function () {
alert('Bye!')
}这是因为 onload 只是对象的属性，它被覆盖了。
与 类比addEventListener，使用$(document).ready()比 onload更好。