$(文档)时函数(){ //当HTML文档被加载并且DOM准备好时执行 警报(“文件已准备好”); })； // .load()方法从jQuery 1.8开始已弃用 美元(窗口)。On ("load"， function() { //当整个页面完全加载时执行，包括 //所有帧，对象和图像 alert(“窗口已加载”); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " > < /脚本>

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

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

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

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

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

$(document).ready()是一个jQuery事件，发生在HTML文档完全加载时，而窗口。Onload事件稍后发生，当页面上的所有内容(包括图像)都加载时。

窗口。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;
};

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

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

$(document).ready(function() {

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

窗外。然而，加载将等待页面完全加载。这包括内部框架，图像等。

$(window).load(function() {

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

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

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

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

因此jquery ready方法将在dom onload事件之前运行。