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


JavaScript之间有什么区别 window.onload 和jQuery的 $(document).ready() 方法?


1087
2017-09-13 06:24


起源


可能重复 没有jQuery的$(document).ready等价 - Kzqai


答案:


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

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


1111
2017-09-13 06:28



@baptx:你错了。该 ready 事件 是 特定于jQuery。它正在使用 DOMContentLoaded 如果事件在浏览器中可用,则表示模拟它。 DOM中没有确切的等价物,因为 DOMContentLoaded 并非所有浏览器都支持该事件。 - Guffa
好的但DOMContentLoaded存在相同的结果,也许你应该指定它 - baptx
@baptx:我认为这个问题并不重要,我仍然没有。 - Guffa
@baptx不一样的结果,文件就绪处理程序将在DOM有效准备好后使用promise进行解雇。 DOMContentLoaded 惯于。因此,文档jquery ready处理程序在异步设置外部脚本加载时非常有用 - A. Wolff
为什么选择downvote?如果你不解释你认为错的是什么,它就无法改善答案。 - Guffa


window.onload 是内置的JavaScript事件,但正如它的实现一样 微妙 跨浏览器的怪癖(Firefox,Internet Explorer 6,Internet Explorer 8和 歌剧),jQuery提供 document.ready,它将那些抽象的东西抽象出来,并在页面的DOM准备就绪后立即触发(不等待图像等)。

$(document).ready (注意它是   document.ready,这是未定义的)是一个jQuery函数,包装和提供 一致性 以下事件:

  • document.ondomcontentready / document.ondomcontentloaded  - 一个新的事件,在文档的DOM加载时触发(可能是一段时间 之前 加载图像等);再次,在Internet Explorer和世界其他地方略有不同
  • window.onload (甚至在旧浏览器中实现),在整个页面加载时触发(图像,样式等)

124
2017-09-13 06:30



这里有一点误解: load 的事件 window 在浏览器中合理地实现。 jQuery和其他库试图解决的问题是你提到的问题,即问题 load 直到所有相关资源(如图像和样式表)都已加载后才会触发事件,这可能需要很长时间才能完全加载,呈现并准备好进行交互。调用DOM准备就绪时在大多数浏览器中触发的事件 DOMContentLoaded不是 DOMContentReady。 - Tim Down
@Tim Down: 合理 这是关键词;至少有一些对象嗅探过去是必要的,即使是 onload (与FF / IE / Opera有差异)。至于 DOMContentLoaded,你完全正确。编辑澄清。 - Piskvor
你的意思是什么样的物体嗅探? - Tim Down
@Tim Down:我认识Opera 有 它,但事件触发它有点古怪(触发可靠, document.onload 是可用的)。就window.onload而言: window.onload = fn1;window.onload=fn2;  - 只有fn2会被调用onload。一些免费的webhosts将自己的代码插入到文档中,有时这会破坏页面内的代码。 - Piskvor
是不是写“document.ready”不正确?文档对象没有ready方法,jQuery对象执行从$(document)调用返回的方法。如果我是对的,请编辑这个答案,因为这非常令人困惑。 - A. Sallai


$(document).ready() 是一个jQuery事件。 JQuery的 $(document).ready() 一旦DOM准备好就会调用方法(这意味着浏览器已经解析了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 功能。


78
2017-08-20 16:00



小问题:对IE的讨论措辞不力。它不是IE(8及以前) “不能安全射击” 直到文件的readyState达到完成,这就是IE 缺乏 DOMContentLoaded事件。不是“安全”问题,而是IE中缺少的功能,在IE 9中添加。 - ToolmakerSteve
你是对的,所以我编辑了答案以反映你的评论和谢谢! - James Drinkard
你说“它不会等待图像被加载。”其他文件怎么样,最重要的是js?通常在从另一个文件调用函数之前 - 我需要知道它是否已加载。 - Darius.V
这是另一个主题,但是如果我理解你的要求,那么它基于你如何构建你的页面,包括你放置js文件的顺序。这是一个更详细的链接: ablogaboutcode.com/2011/06/14/... HTH,詹姆斯 - James Drinkard
另外,它的$(文件).ready(),而不是document.ready()。 - Undefined


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

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

取自以下文章: 怎么样 $document.ready() 不同于 window.onload()


38
2017-09-17 07:09



我认为这是最好的答案! - Haoyu Chen
我可能会同意,如果不是逐字逐句复制的话。 - Kevin B


关于使用的警告 $(document).ready() 使用Internet Explorer。如果HTTP请求被中断 之前 加载整个文档(例如,当页面流式传输到浏览器时,单击另一个链接)IE将触发 $(document).ready 事件。

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

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


21
2017-08-27 18:56



哪个版本的IE?我知道我应该关心兼容性,但是用IE很难。是否可以将document.ready用于JavaScript? - mishmomo
IE6,7和8.请参阅: stackoverflow.com/questions/13185689/... - James Drinkard
很高兴知道,谢谢! - mkoistinen


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


18
2018-02-26 12:30





活动

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

$(document).on('load', handler) 是一个将被解雇的事件 资源已加载 从服务器。现在加载图像。而 负载 是一个原始的HTML事件, 准备 是由jQuery构建的。

功能

$(document).ready(handler) 实际上是一个 诺言如果在调用时文档准备就绪,将立即调用该处理程序。 否则它会绑定到 ready-事件。

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

进一步阅读


15
2018-06-02 10:38



你可以解释一下$(document).load(handler)的行为与load-event的绑定行为相同。与$ .fn.ready不同,它不会立即通过? - Nabeel Khan
我觉得你很困惑 $.fn.load 不再表现为事件活页夹。事实上,自jquery 1.8以来它已经过时了。我相应地更新了它 - abstraktor
邑!确切地说,谢谢:) - Nabeel Khan


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

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


11
2018-03-03 06:52





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

11
2017-11-07 20:54