小开

最佳答案

ready事件发生在加载超文本标记语言文档之后，而onload事件发生在稍后，当所有内容（例如图像）也已加载时。

onload事件是DOM中的标准事件，而ready事件特定于jQuery。ready事件的目的是在文档加载后尽早发生，以便为页面中的元素添加功能的代码不必等待所有内容加载。

小开

window.onload是内置的JavaScript事件，但由于它的实现在浏览器（Firefox、Internet Explorer 6、Internet Explorer 8和Opera）上有微妙个怪癖，jQuery提供了document.ready，它将这些怪癖抽象出来，并在页面的DOM准备好后立即触发（不等待图像等）。

$(document).ready（注意它是没有document.ready，未定义）是一个jQuery函数，将一致性包装并提供给以下事件：

DOMContentLoaded-加载文档的DOM时触发的新事件（可能是加载图像等的某个时间之前）；同样，在Internet Explorer和世界其他地方略有不同
和window.onload（即使在旧浏览器中也可以实现），当整个页面加载（图像、样式等）时触发。

小开

在Internet Explorer中使用$(document).ready()时需要注意。如果HTTP请求被中断之前，则整个文档将被加载（例如，当页面流式传输到浏览器时，单击另一个链接）IE将触发$(document).ready事件。

如果$(document).ready()事件中的任何代码引用DOM对象，则可能找不到这些对象，并且可能发生Javascript错误。要么保护对这些对象的引用，要么将引用这些对象的代码推迟到window.load事件。

我无法在其他浏览器（特别是Chrome和Firefox）中重现此问题

小开

window.onload：一个普通的JavaScript事件。

document.ready：加载整个超文本标记语言时的特定jQuery事件。

小开

$(document).ready()是一个jQuery事件。一旦DOM准备就绪，JQuery的$(document).ready()方法就会被调用（这意味着浏览器已经解析了超文本标记语言并构建了DOM树）。这允许您在文档准备好被操作时立即运行代码。

例如，如果浏览器支持DOMContentLo的事件（就像许多非IE浏览器一样），那么它将触发该事件。（请注意，DOMContentLo的事件仅在IE9+中添加到IE。）

有两种语法可用于此：

$( document ).ready(function() {console.log( "ready!" );});

或简写版本：

$(function() {console.log( "ready!" );});

$(document).ready()的要点：

它不会等待加载图像。
用于在DOM完全加载时执行JavaScript。将事件处理程序放在此处。
可以多次使用。
当您收到“$未定义”时，将$替换为jQuery。
如果要操作图像，则不使用。改用$(window).load()。

window.onload()是一个原生JavaScript函数。当页面上的所有内容都已加载，包括DOM（文档对象模型）、横幅广告和图像时，window.onload()事件会触发。两者之间的另一个区别是，虽然我们可以有多个$(document).ready()函数，但我们只能有一个onload函数。

小开

当页面上的所有内容（包括DOM（文档对象模型）内容和异步JavaScript、帧和图像）都被完全加载时，会触发windows加载事件。您也可以使用body onload=。两者都是相同的；window.onload = function(){}和<body onload="func();">是使用同一事件的不同方式。

jQuery#0函数事件比window.onload早一点执行，一旦DOM（Document对象模型）加载到您的页面上就会被调用。它不会等待图像，帧以获得完全加载。

摘自以下文章：#0与#1有何不同

小开

有一件事要记住（或者我应该说回想一下），你不能像ready那样堆叠onload。换句话说，jQuery魔法允许在同一页面上有多个ready，但你不能用onload做到这一点。

最后一个onload将覆盖任何先前的onload。

一个很好的处理方法是使用一个显然由Simon Willison编写并在使用多个JavaScript Onload函数中描述的函数。

function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;}else {window.onload = function() {if (oldonload) {oldonload();}func();}}}
// Example use:addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);addLoadEvent(function() {/* More code to run on page load */});

小开

活动

$(document).on('ready', handler)绑定到jQuery的就绪事件。处理程序称为当DOM加载时。类似于图像可能仍然缺失的资产。如果文档在绑定时准备好，它永远不会被调用。jQuery为此使用DOM内容加载-Event，如果不可用则模拟它。

$(document).on('load', handler)是一个事件，将从服务器触发所有资源加载。现在加载图像。onload是一个原始的超文本标记语言事件，准备是由jQuery构建的。

函数

$(document).ready(handler)实际上是承诺。如果在调用时文档已准备就绪，则将立即调用处理程序。否则它绑定到ready事件。

jQuery 1.8之前、$(document).load(handler)作为$(document).on('load',handler)的别名存在。

进一步阅读

小开

$(document).ready(function() {
// Executes when the HTML document is loaded and the DOM is readyalert("Document is ready");});
// .load() method deprecated from jQuery 1.8 onward$(window).on("load", function() {
// Executes when complete page is fully loaded, including// all frames, objects and imagesalert("Window is loaded");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

小开

window.onload是一个JavaScript内置函数。window.onload在加载超文本标记语言页面时触发。window.onload只能写一次。

document.ready是jQuery库的一个函数。document.ready在完全加载超文本标记语言和所有JavaScript代码、CSS和包含在超文本标记语言文件中的图像时触发。document.ready可以根据需要多次写入。

小开

Document.ready（jQuery事件）将在所有元素就位时触发，并且可以在JavaScript代码中引用它们，但不一定加载内容。

$(document).ready(function() {
// Code to be executedalert("Document is ready");});

但是window.load将等待页面完全加载。这包括内部框架、图像等。

$(window).load(function() {
//Fires when the page is loaded completelyalert("window is loaded");});

小开

document.ready事件发生在加载超文本标记语言文档时，window.onload事件总是在加载所有内容（图像等）后发生。

如果您想在渲染过程中“早期”干预，您可以使用document.ready事件，而无需等待图像加载。如果您需要在脚本“做某事”之前准备好图像（或任何其他“内容”），则需要等到window.onload。

例如，如果你正在实现一个“幻灯片放映”模式，并且你需要根据图像大小执行计算，你可能想等到window.onload。否则，你可能会遇到一些随机问题，这取决于图像加载的速度。你的脚本将与加载图像的线程同时运行。如果你的脚本足够长，或者服务器足够快，如果图像碰巧及时到达，你可能不会注意到问题。但最安全的做法是允许图像加载。

document.ready可能是一个很好的事件，可以向用户显示一些“加载…”标志，并且在window.onload之后，您可以完成任何需要加载资源的脚本，然后最终删除“加载…”标志。

例子：-

// document ready events$(document).ready(function(){alert("document is ready..");})
// using JQuery$(function(){alert("document is ready..");})
// window on load eventfunction myFunction(){alert("window is loaded..");}window.onload = myFunction;

小开

$(document).ready()是jQuery事件，当超文本标记语言文档完全加载时发生，而window.onload事件稍后发生，当页面上的所有内容（包括图像）都加载时发生。

另外window.onload是DOM中的纯javascript事件，而$(document).ready()事件是jQuery中的方法。

$(document).ready()通常是jQuery的包装器，以确保所有加载的元素都在jQuery中使用…

查看jQuery源代码以了解它的工作原理：

jQuery.ready.promise = function( obj ) {if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.// we once tried to use readyState "interactive" here, but it caused issues like the one// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15if ( document.readyState === "complete" ) {// Handle it asynchronously to allow scripts the opportunity to delay readysetTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded} else if ( document.addEventListener ) {// Use the handy event callbackdocument.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always workwindow.addEventListener( "load", completed, false );
// If IE event model is used} else {// Ensure firing before onload, maybe late but safe also for iframesdocument.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always workwindow.attachEvent( "onload", completed );
// If IE and not a frame// continually check to see if the document is readyvar top = false;
try {top = window.frameElement == null && document.documentElement;} catch(e) {}
if ( top && top.doScroll ) {(function doScrollCheck() {if ( !jQuery.isReady ) {
try {// Use the trick by Diego Perini// http://javascript.nwbox.com/IEContentLoaded/top.doScroll("left");} catch(e) {return setTimeout( doScrollCheck, 50 );}
// detach all dom ready eventsdetach();
// and execute any waiting functionsjQuery.ready();}})();}}}return readyList.promise( obj );};jQuery.fn.ready = function( fn ) {// Add the callbackjQuery.ready.promise().done( fn );
return this;};

我还创建了下面的图像作为两者的快速参考：

小开

当您说$(document).ready(f)时，您告诉脚本引擎执行以下操作：

获取目标文档并推送它，因为它不在本地范围内，它必须进行哈希表查找以查找文档的位置，幸运的是文档是全局绑定的，因此它是一次查找。
找到对象$并选择它，因为它不在本地范围内，它必须执行哈希表查找，这可能会或可能不会发生冲突。
在全局范围内找到对象f，这是另一个哈希表查找，或推送函数对象并对其进行初始化。
调用所选对象的ready，这涉及到对所选对象的另一个哈希表查找以找到该方法并调用它。
完成。

在最好的情况下，这是2个哈希表查找，但这忽略了jQuery所做的繁重工作，其中$是jQuery所有可能输入的厨房接收器，因此可能有另一个映射将查询调度到正确的处理程序。

或者，你可以这样做：

window.onload = function() {...}

这将

在全局范围内找到对象窗口，如果JavaScript被优化，它会知道由于窗口没有改变，它已经选择了对象，所以不需要做任何事情。
函数对象被推送到操作数堆栈上。
通过执行哈希表查找来检查onload是否是属性，因为它是，它就像函数一样被调用。

在最好的情况下，这需要单个哈希表查找，这是必要的，因为必须获取onload。

理想情况下，jQuery会将它们的查询编译成字符串，这些字符串可以粘贴来做你想要jQuery做的事情，但没有jQuery的运行时调度。这样你就可以选择

像我们今天一样动态调度jQuery。
让jQuery将您的查询编译为纯JavaScript字符串，该字符串可以传递给ava以执行您想要的操作。
将2的结果直接复制到您的代码中，并跳过eval的成本。

小开

小贴士：

永远使用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。

小开

window.onload由DOM api提供，它说“加载事件在给定资源加载时触发”。

"加载事件在文档加载过程结束时触发。此时，文档中的所有物体位于DOM中，所有图像、脚本、链接和子帧都已完成加载。"DOM加载

但在jQuery中，$（documents）. read（）只会在页面文档对象模型（DOM）准备好供JavaScript代码执行时运行。这不包括图像、脚本、ifram等。jQuery就绪事件

因此，jQuery就绪方法将比dom onload事件运行早些时候。

小开

时光飞逝，现在是ECMAScript 2021，IE11被越来越少的人使用。相比之下，最多的两个事件是#0和#1。

#0在初始超文本标记语言文档完全加载后触发，解析。

#0在DOMContentLoaded之后触发，整个页面已加载，等待所有依赖资源完成加载。资源示例：脚本、样式表、图像和iframe等。

重要提示：同步脚本将暂停解析DOM。

这两个事件都可以用来确定DOM是否能够使用。例如：

<script>// DOM hasn't been completely parseddocument.body; // null
window.addEventListener('DOMContentLoaded', () => {// Now safely manipulate DOMdocument.querySelector('#id');document.body.appendChild();});
/*** Should be used only to detect a fully-loaded page.** If you just want to manipulate DOM safely, `DOMContentLoaded` is better.*/window.addEventListener('load', () => {// Safely manipulate DOM toodocument.links;});</script>

window.onloadvs$（文档）.就绪（）

活动

函数

进一步阅读

小贴士：