javascript - window.onload 与 $(document).ready()

Question

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

score 1319 · Accepted Answer

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

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

score 149 · Accepted Answer

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（即使在旧浏览器中也实现），当整个页面加载（图像，样式等）时触发

score 90 · Accepted Answer

$(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功能。

score 46 · Accepted Answer

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

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

摘自以下文章：$document.ready()与window.onload()

score 39 · Accepted Answer

一个小提示：

始终使用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。

score 26 · Accepted Answer

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

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

score 25 · Accepted Answer

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

score 22 · Accepted Answer

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

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

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

score 18 · Accepted Answer

活动

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

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

职能

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

在 jQuery 1.8 之前，$(document).load(handler)作为$(document).on('load',handler).

延伸阅读

score 13 · Accepted Answer

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

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

score 12 · Accepted Answer

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

最后一个onload将推翻任何以前onload的 s。

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

score 12 · Accepted Answer

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

score 10 · Accepted Answer

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;

score 4 · Accepted Answer

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

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

loadDOMContentLoaded在整个页面加载完毕后触发，等待所有相关资源完成加载。资源示例：脚本、样式表、图像和 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>

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

当您说时$(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.

score 0 · Accepted Answer

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

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

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

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

javascript - window.onload 与 $(document).ready()

17 回答 17

一个小提示：

活动

职能

延伸阅读

Related

Reference