问：

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

javascript jquery dom-events unobtrusive-javascript

2赞 Kzqai 3/15/2015

$（document）.ready 等效项的可能重复，没有 jQuery

7赞 Shikkediel 6/13/2019

这里的大多数答案都已经过时了。jQuery目前的实现方式有时会让它触发。$().ready()window.onload

2赞 JP Zhang 8/27/2020

备注：是 jQuery 对 window.onload 的等效项$(window).on('load', function(){});

0赞 3/8/2022

对于文档就绪功能，我们可以如下设置。document.addEventListener（“DOMContentLoaded”，函数（事件） {}）;对于window.onload，如下所示...window.addEventListener（'load'，函数（） {}）;

答：

1362赞 Guffa 9/13/2010 #1

该事件发生在 HTML 文档加载之后，而事件发生在加载所有内容（例如图像）时。readyonload

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

0赞 Jorge Orpinel Pérez 2/10/2014

还有 document.onload（参见 stackoverflow.com/questions/588040/...)

1赞 A. Wolff 3/7/2014

@baptx结果不同，即使在 DOM 有效准备就绪后，也会使用 promise 触发文档就绪处理程序。不会。因此，当异步设置外部脚本加载时，文档 jquery 就绪处理程序确实很有用DOMContentLoaded

1赞 ToolmakerSteve 8/12/2014

仅供参考，@baptx给出的链接本身链接到基于（如果存在）或（对于 IE）的 js 函数：github.com/dperini/ContentLoaded/blob/master/src/...所以大概这就是实现 jQuery 的 .DOMContentLoadedreadystatechangedready

0赞 Rituraj ratan 9/2/2014

tech-blog.maddyzone.com/javascript/......希望这会有所帮助

6赞 Scott Marcus 3/13/2016

没有这样的事件。是对象属性的名称，该属性存储触发事件时要调用的函数。onloadonloadload

160赞 Piskvor left the building 9/13/2010 #2

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

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

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

21赞 Tim Down 9/13/2010

这里有一个小小的误解：事件在浏览器中是相当一致的。jQuery和其他库试图解决的问题就是你提到的问题，即在加载所有依赖资源（如图像和样式表）之前，事件不会被触发，这可能是在DOM完全加载、渲染并准备好进行交互之后很长一段时间。当 DOM 准备就绪时，在大多数浏览器中触发的事件称为，而不是。loadwindowloadDOMContentLoadedDOMContentReady

2赞 Piskvor left the building 9/13/2010

@Tim Down：合理是这里的关键词;至少一些对象嗅探曾经是必要的，即使有（FF/IE/Opera 存在差异）。至于，你是完全正确的。编辑以澄清。onloadDOMContentLoaded

0赞 Tim Down 9/13/2010

你指的是什么样的物体嗅探？

1赞 Piskvor left the building 9/13/2010

@Tim Down：我知道 Opera 有它，但它的事件触发器有点古怪（可靠地触发，是可用的）。就 window.onload 而言： - 只有 fn2 会被调用 onload。一些免费的虚拟主机将自己的代码插入到文档中，有时这会破坏页面内的代码。document.onloadwindow.onload = fn1;window.onload=fn2;

2赞 A. Sallai 3/6/2014

写“document.ready”不是不正确吗？document 对象没有 ready 方法，jQuery 对象有从 $（document）调用返回的方法。如果我是对的，请编辑这个答案，因为这非常令人困惑。

22赞 deck 8/28/2012 #3

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

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

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

0赞 Monica 1/4/2013

哪个版本的 IE？我知道我应该关心兼容性，但使用 IE 很难。仅将 document.ready 用于 JavaScript 是否可以接受？

1赞 James-Jesse Drinkard 2/12/2013

IE6、7 和 8。请参阅：stackoverflow.com/questions/13185689/...

14赞 Amir Mehdi Delta 6/2/2013 #4

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

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

94赞 James-Jesse Drinkard 8/21/2013 #5

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

例如，如果浏览器支持 DOMContentLoaded 事件（与许多非 IE 浏览器一样），则它将在该事件上触发。（请注意，DOMContentLoaded 事件仅在 IE9+ 中添加到 IE。

为此，可以使用两种语法：

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

或者速记版本：

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

要点：$(document).ready()

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

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

4赞 ToolmakerSteve 8/12/2014

次要观点：IE的讨论措辞不当。这并不是说 IE（8 及更早版本）在文档的 readyState 完成之前“不能安全触发”，而是 IE 缺少 DOMContentLoaded 事件。这不是“安全”的问题，而是IE中缺少的功能，在IE 9中添加。

0赞 James-Jesse Drinkard 5/14/2015

你是对的，所以我编辑了答案以反映您的评论和谢谢！

0赞 Dariux 8/12/2015

你说“它不会等待图像加载。其他文件呢，最重要的是JS？通常在从另一个文件调用函数之前 - 我需要知道它是否被加载。

0赞 James-Jesse Drinkard 8/12/2015

这完全是另一个话题，但如果我理解你在问什么，它取决于你如何构建你的页面，包括你放置 js 文件的顺序。这是一个更详细的链接：ablogaboutcode.com/2011/06/14/...HTH，詹姆斯

0赞 Uthman 1/13/2016

为什么有人想多次使用 $（document）.ready（）？

48赞 Vivek 9/17/2013 #6

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

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

摘自以下文章：$document.ready（）与 window.onload（）有何不同

1赞 Haoyu Chen 11/9/2015

我认为这是最好的答案！

4赞 Kevin B 7/1/2016

我可能会同意，如果它不是逐字复制的。

12赞 Donald A Nummer Jr 11/8/2013 #7

要记住的一件事（或者我应该说是回忆）是你不能像 .换句话说，jQuery魔术允许在同一页面上有多个s，但你不能用.onloadreadyreadyonload

最后一个将推翻任何先前的 s。onloadonload

一个很好的处理方法是使用一个显然由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 */
});

18赞 4 revs, 3 users 57%abstraktor #8

事件

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

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

功能

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

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

延伸阅读

0赞 Nabeel Khan 1/27/2016

您能否解释一下 $（document）.load（handler）的行为与绑定到 load-event 相同。与 $.fn.ready 不同，它不会立即调用？

0赞 abstraktor 1/27/2016

我想你对它不再表现为事件活页夹感到困惑。事实上，自 jquery 1.8 以来，它已经过时了。我相应地更新了它$.fn.load

27赞 dev4092 2/26/2014 #9

$(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");
});

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

2赞 Amit 6/24/2014 #10

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

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

0赞 vik 11/30/2018

“window.onload is a function” 不正确，因为 @Илья-Зеленько 演示它是一个属性而不是一个函数。细节：developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/... 而 .ready（）是一个函数，需要一个处理程序。

12赞 Mike Clark 3/3/2015 #11

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

$(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");
});

11赞 Nimesh khatri 5/16/2016 #12

document.ready 事件在加载 HTML 文档时发生，并且该事件总是在加载所有内容（图像等）时发生。window.onload

如果要在渲染过程中“尽早”干预，而无需等待图像加载，则可以使用该事件。如果您需要在脚本“执行某些操作”之前准备好图像（或任何其他“内容”），则需要等到 .document.readywindow.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;

27赞 Alireza 10/13/2017 #13

这是一个 jQuery 事件，当 HTML 文档已完全加载时发生，而该事件稍后发生，当页面上的所有内容（包括图像）加载时。$(document).ready()window.onload

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

$(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;
};

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

1赞 Dmytro 12/1/2017 #14

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

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

在最好的情况下，这是 2 个哈希表查找，但这忽略了 jQuery 完成的繁重工作，其中是 jQuery 所有可能输入的厨房水槽，因此可能会有另一个映射将查询分派给正确的处理程序。$

或者，您可以这样做：

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

这将

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

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

理想情况下，jQuery会将其查询编译为字符串，这些字符串可以粘贴以执行您希望jQuery执行的操作，而无需jQuery的运行时调度。这样，您可以选择以下任一选项

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

51赞 Илья Зеленько 9/2/2018 #15

小贴士：

始终使用将事件添加到窗口。因为这样你就可以在不同的事件处理程序中执行代码。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()

13赞 12/13/2018

这并不能回答提出的问题。

0赞 andyCao 2/14/2020 #16

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

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

但是在jQuery中，$（document）.ready（）只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。这不包括图像、脚本、iframe 等。 jQuery Ready 事件

因此，jquery ready 方法将比 dom onload 事件更早运行。

5赞 LitileXueZha 7/1/2021 #17

时光荏苒，现在是 ECMAScript 2021，人们越来越少使用 IE11。相比之下，最多的两个事件是 load 和 DOMContentLoaded。

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

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

重要说明：同步脚本将暂停 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>

上一个：关于不显眼的javascript/ajax的指南/教程

下一个：window.onload 与 $（document）.ready（）

window.onload 与 $（document）.ready（）

window.onload vs $(document).ready()

评论

评论

评论

评论

评论

评论

事件

功能

延伸阅读

评论

评论

小贴士：

评论