【问题标题】：window.onload vs $(document).ready()window.onload 与 $(document).ready()
【发布时间】：2011-04-11 12:33:48
【问题描述】：

JavaScript 的 window.onload 和 jQuery 的 $(document).ready() 方法有什么区别？

【问题讨论】：

$(document).ready equivalent without jQuery的可能重复
这里的大部分答案都已过时。 jQuery 当前实现$().ready() 的方式有时会在window.onload 之后触发。
备注：$(window).on('load', function(){}); 是 jQuery 的 window.onload 等价物
对于文档准备功能，我们可以设置如下.. document.addEventListener("DOMContentLoaded", function (event) {});对于 window.onload 如下所示... window.addEventListener('load', function () {});

标签： javascript jquery dom-events unobtrusive-javascript

【解决方案1】：

ready 事件在 HTML 文档加载后发生，而onload 事件在稍后发生，此时所有内容（例如图像）也已加载。

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

【讨论】：

还有document.onload（见stackoverflow.com/questions/588040/…）
@baptx 结果不一样，即使在 DOM 有效准备好之后设置了文档准备处理程序，也会使用 Promise 触发。 DOMContentLoaded 不会。因此，当在外部脚本异步加载中设置时，文档 jquery 就绪处理程序真的很有用
仅供参考，@baptx 给出的链接本身链接到基于DOMContentLoaded（如果存在）或readystatechanged（对于 IE）的 js 函数：github.com/dperini/ContentLoaded/blob/master/src/… 所以大概就是这样实现jQuery的ready。
tech-blog.maddyzone.com/javascript/…希望这会有所帮助
没有onload这样的事件。 onload 是对象属性的名称，该属性存储在触发load 事件时要调用的函数。

【解决方案2】：

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

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

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

【讨论】：

这里有个小误解：window 的load 事件在浏览器中的实现相当一致。 jQuery 和其他库试图解决的问题是您提到的问题，即 load 事件直到所有依赖资源（例如图像和样式表）都加载后才会触发，这可能是 DOM 加载后的很长时间完全加载、渲染并准备好进行交互。当 DOM 准备好时在大多数浏览器中触发的事件称为 DOMContentLoaded，而不是 DOMContentReady。
@Tim Down：合理是这里的关键词；即使使用onload（FF/IE/Opera 存在差异），至少曾经需要一些对象嗅探。至于DOMContentLoaded，你是完全正确的。编辑澄清。
你是什么意思的对象嗅探？
@Tim Down：我知道 Opera 拥有它，但它上面的事件触发器有点古怪（要可靠地触发，document.onload 是可用的）。就 window.onload 而言：window.onload = fn1;window.onload=fn2; - 只有 fn2 会在加载时被调用。一些免费的虚拟主机将自己的代码插入到文档中，有时这会破坏页面内代码。
写“document.ready”不正确吗？ document 对象没有 ready 方法，jQuery 对象从 $(document) 调用返回。如果我是对的，请编辑此答案，因为这非常令人困惑。

【解决方案3】：

$(document).ready() 是一个 jQuery 事件。 JQuery 的 $(document).ready() 方法在 DOM 准备好后立即被调用（这意味着浏览器已经解析了 HTML 并构建了 DOM 树）。这使您可以在文档准备好进行操作时立即运行代码。

例如，如果浏览器支持 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 函数。当页面上的所有内容（包括 DOM（文档对象模型）、横幅广告和图像）加载完毕时，window.onload() 事件就会触发。两者之间的另一个区别是，虽然我们可以拥有多个 $(document).ready() 函数，但我们只能拥有一个 onload 函数。

【讨论】：

次要观点：关于 IE 的讨论措辞不当。不是 IE（8 及之前的版本）“无法安全触发” 直到文档的 readyState 完成，而是 IE 缺少 DOMContentLoaded 事件。不是“安全”问题，而是 IE 中缺少的一个功能，在 IE 9 中添加。
你是对的，所以我编辑了答案以反映你的评论，谢谢！
您说“它不会等待图像加载。”其他文件呢，最重要的是js？通常在从另一个文件调用函数之前 - 我需要知道它是否已加载。
这完全是另一个话题，但如果我理解你的要求，它取决于你如何构建你的页面，包括你放置 js 文件的顺序。这是一个更详细的链接：ablogaboutcode.com/2011/06/14/…HTH，James
为什么有人要多次使用 $(document).ready()？

【解决方案4】：

当页面上的所有内容（包括 DOM（文档对象模型）内容和 异步 JavaScript、框架和图片。你也可以使用body onload=。两者都是一样的； window.onload = function(){} 和 <body onload="func();"> 是使用同一事件的不同方式。

jQuery $document.ready 函数事件比window.onload 早一点执行，并在页面上加载 DOM（文档对象模型）后调用。它不会等待图像、帧完全加载。

取自以下文章： how $document.ready() is different from window.onload()

【讨论】：

我认为这是最好的答案！
我可能会同意，如果不是逐字复制的话。

【解决方案5】：

一个小提示：

总是使用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。

【讨论】：

这没有回答所提出的问题。

【解决方案6】：

$(document).ready() 是一个 jQuery 事件，在 HTML 文档完全加载时发生，而 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:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var 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 events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

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

【讨论】：

【解决方案7】：

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("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 images
     alert("Window is loaded");
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案8】：

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

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

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

【讨论】：

哪个版本的IE？我知道我应该关心兼容性，但是用 IE 很难。仅将 document.ready 用于 JavaScript 是否可以接受？
IE6、7 和 8。请参阅：stackoverflow.com/questions/13185689/…

【解决方案9】：

活动

$(document).on('ready', handler) 绑定到来自 jQuery 的 ready 事件。 在加载 DOM 时调用处理程序。 图片等资产可能仍然丢失。如果文档在绑定时准备好，它将永远不会被调用。 jQuery 为此使用DOMContentLoaded-Event，如果不可用则模拟它。

$(document).on('load', handler) 是从服务器加载所有资源后将触发的事件。图像已加载。 onload 是一个原始的 HTML 事件，而 ready 是由 jQuery 构建的。

功能

$(document).ready(handler) 实际上是一个promise。 如果在调用时文档准备就绪，将立即调用处理程序。否则它会绑定到ready-Event。

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

进一步阅读

【讨论】：

您能否解释一下 $(document).load(handler) 的行为与绑定到加载事件的行为相同。与 $.fn.ready 不同，它不会立即调用？
我认为你对 $.fn.load 感到困惑，它不再充当事件绑定器。事实上，它从 jquery 1.8 开始就已经过时了。我相应地更新了它

【解决方案10】：

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

document.ready： 加载整个 HTML 时的特定 jQuery 事件。

【讨论】：

【解决方案11】：

要记住的一件事（或者我应该说是回忆）是您不能像使用 ready 那样堆叠 onloads。换句话说，jQuery 魔法允许在同一页面上出现多个 readys，但您不能使用 onload 来做到这一点。

最后的onload 将取代之前的onloads。

处理这个问题的一个好方法是使用一个显然由 Simon Willison 编写并在 Using Multiple JavaScript Onload Functions 中描述的函数。

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 */
});

【讨论】：

【解决方案12】：

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

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

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

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

【讨论】：

【解决方案13】：

document.ready 事件在 HTML 文档已加载时发生，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 event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

【讨论】：

【解决方案14】：

时间过得真快，现在是 ECMAScript 2021，IE11 被越来越少的人使用。对比最多的两个事件是load 和DOMContentLoaded。

DOMContentLoaded 在 initial HTML 文档完全加载并解析后触发。

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

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

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

<script>
    // DOM hasn't been completely parsed
    document.body; // null

    window.addEventListener('DOMContentLoaded', () => {
        // Now safely manipulate DOM
        document.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 too
        document.links;
    });
</script>

【讨论】：

【解决方案15】：

window.onload 是一个 JavaScript 内置函数。 window.onload 在 HTML 页面加载时触发。 window.onload 只能写一次。

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

【讨论】：

"window.onload is a function" 不正确，因为@Илья-Зеленько 证明它是一个属性而不是一个函数。详细信息：developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… 而 .ready() 是一个函数，需要一个处理程序。

【解决方案16】：

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

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

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

或者，您可以这样做：

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

会

在全局范围内找到对象window，如果对JavaScript进行了优化，它就会知道由于window没有改变，它已经有了选择的对象，所以什么都不需要做。
函数对象被压入操作数栈。
通过查找哈希表来检查onload 是否为属性，因为它是，所以它被称为函数。

在最好的情况下，这会花费一次哈希表查找，这是必要的，因为必须获取 onload。

理想情况下，jQuery 会将他们的查询编译为字符串，这些字符串可以粘贴来执行您希望 jQuery 执行的操作，但无需运行时调度 jQuery。这样你就可以选择

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

【讨论】：

【解决方案17】：

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

"加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在 DOM 中，并且所有图像、脚本、链接和子-帧已完成加载。” DOM onload

但是在 jQuery 中 $(document).ready() 只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。这不包括图像、脚本、iframe 等。jquery ready event

所以 jquery ready 方法将比 dom onload 事件早运行。

【讨论】：