Javascript window.onload vs$（document.ready（））

JavaScript和jQuery的方法有什么区别？

在加载HTML文档后会发生

ready

事件，而

onload

事件会在加载所有内容（例如图像）后发生

---

onload

事件是DOM中的标准事件，而

ready

事件特定于jQuery。

ready

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

窗口。onload

是内置的JavaScript事件，但是，由于它的实现在不同浏览器（Firefox、InternetExplorer6、InternetExplorer8和）之间存在微妙的差异，jQuery提供了

document.ready

，它将这些内容抽象出来，并在页面的DOM准备好后立即启动（不等待图像等）

$（document）.ready

（请注意，它不是未定义的

document.ready

）是一个jQuery函数，包装并提供以下事件的一致性：

• document.ondomcontentready

  /

  document.ondomcontentloaded

  -加载文档的DOM时（可能在加载图像等前一段时间）触发的新事件；同样，InternetExplorer和世界其他地方略有不同
• 和

  window.onload

  （即使在旧浏览器中也可以实现），当整个页面加载（图像、样式等）时触发

---

关于使用Internet Explorer使用

$（document）.ready（）

的注意事项。如果HTTP请求在加载整个文档之前中断（例如，当一个页面流式传输到浏览器时，单击另一个链接），IE将触发

$（document）.ready

事件

如果

$（document）.ready（）

事件中的任何代码引用DOM对象，则可能无法找到这些对象，并且可能会发生Javascript错误。保护对这些对象的引用，或者将引用这些对象的代码延迟到window.load事件

---

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

窗口。onload:正常的JavaScript事件

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

$（document）.ready（）

是一个jQuery事件。一旦DOM就绪，就会调用JQuery的

$（document）.ready（）

方法（这意味着浏览器已经解析了HTML并构建了DOM树）。这允许您在文档准备好进行操作时立即运行代码

例如，如果浏览器支持DOMContentLoaded事件（许多非IE浏览器都支持），那么它将触发该事件。（注意，DOMContentLoaded事件仅添加到IE9+中的IE中。）

可使用两种语法：

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

或速记版本：

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

$（document）.ready（）的要点


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


window.onload（）
是一个本机JavaScript函数。当页面上的所有内容（包括DOM（文档对象模型）、横幅广告和图像）都已加载时，将触发
window.onload（）
事件。两者之间的另一个区别是，虽然我们可以有多个
$（document）.ready（）
函数，但我们只能有一个
onload
函数。
当页面上的所有内容（包括DOM（文档对象模型））都已完全加载时，将触发一个Windows加载事件内容和异步JavaScript，帧和图像。您还可以使用body onload=。两者是相同的
window.onload=function（）{}
和
是使用同一事件的不同方式

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

摘自以下文章：
需要记住的一件事（或者我应该说是回忆）是，您不能像使用
ready
那样将
onload
堆叠起来。换句话说，jQueryMagic允许在同一页面上有多个
ready
s，但不能通过
onload
来实现

最后一次
onload
将否决之前的任何
onload
s

处理这个问题的一个好方法是使用一个函数，该函数显然是由Simon Willison编写的，并在中进行了描述

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

$（document）.on（'load'，handler）
是从服务器加载所有资源后将触发的事件。图像现在已加载。While是一个原始HTML事件，由jQuery构建

功能
$（document）.ready（handler）
实际上是一个如果调用时文档已准备就绪，将立即调用处理程序。否则它将绑定到
ready
-事件

，
$（文档）。加载（处理程序）
作为
$（文档）的别名存在。on(
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).ready(function() {

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

$(window).load(function() {

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

// 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;

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

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