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

Answers:

1242

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

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

— 古法
source
153
@baptx：你错了。该ready事件是具体到jQuery的。DOMContentLoaded如果事件在浏览器中可用，它将使用该事件，否则它将模拟该事件。DOM中没有完全等效的方法，因为DOMContentLoaded并非所有浏览器都支持该事件。
— Guffa
18
好的，但是DOMContentLoaded存在相同的结果，也许您应该已经指定了此内容
— baptx 2012年
55
@baptx：我不认为这与问题有关，但我仍然没有。
— 加法2012年
17
为什么要下票？如果您不解释自己认为是错的是什么，那将无法改善答案。
— Guffa 2014年
4
没有这样的事件onload。onload是对象属性的名称，该属性存储load事件触发时要调用的函数。
— Scott Marcus
140

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

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

  • document.ondomcontentready// document.ondomcontentloaded-一个新事件，该事件在加载文档的DOM时触发（可能在加载图像等之前的某个时间）；再次，在Internet Explorer和世界其他地方略有不同
  • 和window.onload（即使在旧的浏览器中也实现了），并在加载整个页面（图像，样式等）时触发
— 皮斯克沃离开大楼
source
16
这里有一个轻微的误解：的load事件在window各个浏览器中都合理一致地实现。jQuery和其他库正在尝试解决的问题就是您提到的问题，即load直到所有相关资源（例如图像和样式表）均已加载，才触发该事件，这可能是在DOM完全加载之后的很长一段时间，渲染并准备进行交互。DOM准备就绪时，在大多数浏览器中触发的事件称为DOMContentLoaded，而不是DOMContentReady。
— 蒂姆·唐
2
@Tim Down：这里的关键词很合理；即使有onload（至少在FF / IE / Opera之间存在差异），至少也需要一些对象嗅探。至于DOMContentLoaded，您完全正确。编辑以澄清。
— Piskvor在
您的嗅探对象是什么意思？
— Tim Down'9
1
@Tim Down：我知道Opera 拥有它，但是它上的事件触发有点古怪（可靠触发document.onload是可用的）。就window.onload而言：window.onload = fn1;window.onload=fn2;-只有fn2会在onload被调用。一些免费的虚拟主机将自己的代码插入文档中，有时这会破坏页内代码。
— Piskvor于
1
写“ document.ready”不正确吗？document对象没有ready方法，而jQuery对象则是从$（document）调用返回的。如果我是对的，请编辑此答案，因为这很令人困惑。
— A. Sallai 2014年
87

$(document).ready()是一个jQuery事件。$(document).ready()DOM准备就绪后，就会立即调用JQuery的方法（这意味着浏览器已解析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函数。window.onload()加载页面上的所有内容（包括DOM（文档对象模型），横幅广告和图像）后，就会触发该事件。两者之间的另一个区别是，虽然我们可以有多个$(document).ready()功能，但我们只能有一个onload功能。

— 詹姆斯·德怀德
source
4
重点：关于IE的讨论措辞不佳。在文档的readyState完成之前，并不是IE（8及更高版本）“无法安全启动”，而是IE 缺少 DOMContentLoaded事件。不“安全”的问题，但在IE缺少功能，在IE 9中加入
— ToolmakerSteve
您是正确的，所以我编辑了答案以反映您的评论和感谢！
— James Drinkard
您说“它将不等待图像加载。” JS最重要的是其他文件呢？通常在从另一个文件调用函数之前-我需要知道它是否已加载。
— Darius.V，2015年
这完全是另一个主题，但是如果我理解您的要求，它是基于页面的结构方式，包括js文件的放置顺序。以下是链接的详细信息：ablogaboutcode.com/2011/06/14/…HTH，詹姆斯
— 詹姆斯·德怀德2015年
为什么有人要多次使用$（document）.ready（）？
— Usman'1
43

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

jQuery$document.ready函数事件的执行时间比window.onloadDOM（文档对象模型）加载到您的页面上的时间要早一些。它不会等待图像和框架完全加载。

摘自以下文章： 如何$document.ready()不同window.onload()

— 维维克
source
我认为这是最好的答案！
— 陈浩宇2015年
3
我可能会同意，如果没有逐字复制的话。
— 凯文B
23 

$(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>
展开摘要

— dev4092
source
22

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

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

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

— 甲板
source
哪个版本的IE？我知道我应该关心兼容性，但是使用IE很难。使用document.ready仅用于JavaScript是否可以接受？
— 莫妮卡
1
— 詹姆斯Drinkard
22

小提示：

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

— ИльяЗеленько
source
3
这不能回答所问的问题。
17

大事记

$(document).on('ready', handler)绑定到jQuery的ready事件。加载DOM时将调用处理程序。诸如图像之类的资产可能仍然缺失。如果文档在绑定时准备就绪，则永远不会调用它。jQuery 为此使用DOMContentLoaded -Event，如果不可用，则对其进行仿真。

$(document).on('load', handler)是从服务器加载所有资源后将触发的事件。现在已加载图像。当onload是原始HTML事件时，就可以了由jQuery构建。

功能

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

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

进一步阅读

— 抽象
source
您能否解释一下$（document）.load（handler）的行为与绑定到load-event的行为相同。与$ .fn.ready不同，它不会立即通过？
— 纳比尔·汗
我认为您$.fn.load对此感到困惑，因为它不再充当事件绑定器。实际上，自jquery 1.8起，它已被废弃。我据此进行了更新
— 摘要2016年
16

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

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

在此处输入图片说明

— 阿里雷扎
source
1
美丽，推荐文档是一个加分点。.thnx
— Irf
11

要记住的一件事（或者我应该说回想）是，您无法onload像使用一样堆叠ready。换句话说，jQuery magic ready在同一页面上允许多个，但是您不能使用onload。

最后一个onload将否决任何先前onload的。

解决这个问题的一种好方法是使用一个显然由一个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 */
});
— 小唐纳德·阿纳默
source
11

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");
});
— 迈克·克拉克
source
5

加载HTML文档时，将发生document.ready事件，而在加载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;
— 尼梅什·哈特里
source
2

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

document.ready是jQuery库的功能。document.ready当HTML和HTML文件中包含的所有JavaScript代码，CSS和图像完全加载时触发。 document.ready可以根据要求多次书写。

— 阿米特
source
“ window.onload是一个函数”是不正确的，因为@Илья-Зеленько演示了它是一个属性而不是一个函数。详细信息：developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/…而.ready（）是一个函数，需要一个处理程序。
— 维克
1

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

  1. 获取并推送对象文档，因为它不在本地范围内，因此必须进行哈希表查找以找到文档的位置，所幸文档是全局绑定的，因此它是单个查找。
  2. 找到对象$并选择它，因为它不在本地范围内，因此必须进行哈希表查找，这可能会或可能不会发生冲突。
  3. 在全局范围内找到对象f（这是另一个哈希表查找），或者推送功能对象并对其进行初始化。
  4. 调用ready选定对象，这涉及对选定对象的另一个哈希表查找，以找到方法并调用它。
  5. 完成。

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

或者，您可以这样做：

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

哪个会

  1. 在全局范围内找到对象窗口，如果优化了JavaScript，它将知道由于窗口未更改，因此它已经选择了对象，因此无需执行任何操作。
  2. 函数对象被压入操作数堆栈。
  3. onload通过进行哈希表查找来检查是否为属性，因为它是一个函数，因此被称为哈希表。

在最佳情况下，这需要一次哈希表查找，这是必需的，因为onload必须进行获取。

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

  1. 像我们今天一样动态分配jQuery。
  2. 让jQuery将您的查询编译为纯JavaScript字符串，然后将其传递给eval以执行您想要的操作。
  3. 将结果2直接复制到您的代码中，并跳过的费用eval。
— 德米特里
source
0

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

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

但是在jQuery中，$（document）.ready（）仅在页面文档对象模型（DOM）准备好执行JavaScript代码后才能运行。这不包括图片，脚本，iframe等。。jquery ready事件

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

— 安迪曹
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.