JavaScript的window.onload
和jQuery的$(document).ready()
方法有什么区别?
答案 0 :(得分:1174)
加载HTML文档后发生ready
事件,而加载所有内容(例如图片)后,onload
事件发生。
onload
事件是DOM中的标准事件,而ready
事件特定于jQuery。 ready
事件的目的是在文档加载后尽可能早地发生,以便为页面中的元素添加功能的代码不必等待加载所有内容。 / p>
答案 1 :(得分:130)
window.onload
是内置的JavaScript事件,但由于其实现在浏览器中有微妙的怪癖(Firefox,Internet Explorer 6,Internet Explorer 8和Opera) ,jQuery提供document.ready
,它将这些摘要抽象出来,并在页面的DOM准备就绪后立即触发(不等待图像等)。
$(document).ready
(请注意,不 document.ready
,这是未定义的)是一个jQuery函数,包含并为以下事件提供一致性 :
document.ondomcontentready
/ document.ondomcontentloaded
- 一个新的事件,在文档的DOM加载时触发(可能需要一段时间在之前加载图像等);再次,在Internet Explorer和世界其他地方略有不同window.onload
(甚至在旧浏览器中实现),在整个页面加载时会触发(图像,样式等)答案 2 :(得分:85)
$(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()
的要点:
$
替换为jQuery
。$(window).load()
。 window.onload()
是本机JavaScript函数。加载页面上的所有内容时会触发window.onload()
事件,包括DOM(文档对象模型),横幅广告和图片。两者之间的另一个区别是,虽然我们可以有多个$(document).ready()
函数,但我们只能有一个onload
函数。
答案 3 :(得分:41)
当页面上的所有内容完全加载时, Windows加载事件会触发,包括DOM(文档对象模型)内容和异步JavaScript ,框架和图片即可。你也可以使用body onload =。两者都是一样的; window.onload = function(){}
和<body onload="func();">
是使用同一事件的不同方式。
jQuery $document.ready
函数事件比window.onload
早一点执行,并在您的页面上加载DOM(文档对象模型)后调用。它不会等待图像,帧完全加载。
取自以下文章:
how $document.ready()
is different from window.onload()
答案 4 :(得分:22)
关于在Internet Explorer中使用$(document).ready()
的注意事项。如果在加载整个文档之前中断了HTTP请求(例如,当页面流式传输到浏览器时,单击另一个链接)IE将触发$(document).ready
事件。
如果$(document).ready()
事件中的任何代码引用了DOM对象,则可能无法找到这些对象,并且可能发生Javascript错误。保护对这些对象的引用,或将引用这些对象的代码推迟到window.load事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
答案 5 :(得分:20)
$(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>
答案 6 :(得分:16)
$(document).on('ready', handler)
从jQuery绑定到ready事件。加载DOM时,处理程序称为 。像图片这样的资产可能仍然缺失。如果文档在绑定时已准备就绪,则永远不会调用它。 jQuery使用DOMContentLoaded - 事件,如果不可用则模拟它。
$(document).on('load', handler)
是从服务器加载所有资源后将触发的事件。现在加载图像。虽然onload是原始HTML事件,但ready是由jQuery构建的。
$(document).ready(handler)
实际上是promise。 如果在调用时文档已准备好,将立即调用处理程序。否则它将绑定到ready
- 事件。
Before jQuery 1.8,$(document).load(handler)
作为$(document).on('load',handler)
的别名存在。
答案 7 :(得分:13)
始终使用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。
答案 8 :(得分:12)
window.onload: 正常的JavaScript事件。
document.ready: 加载整个HTML时的特定jQuery事件。
答案 9 :(得分:12)
$(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;
};
此外,我创建了以下图片作为两者的快速参考:
答案 10 :(得分:11)
Document.ready
(一个jQuery事件)将在所有元素到位时触发,并且可以在JavaScript代码中引用它们,但不一定要加载内容。 <{1}}在加载HTML文档时执行。
Document.ready
然而,$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
将等待页面完全加载。这包括内框,图像等。
window.load
答案 11 :(得分:10)
要记住的一件事(或者我应该回忆一下)是你不能像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 */
});
答案 12 :(得分:4)
在加载HTML文档时会发生document.ready事件,并且在加载了所有内容(图像等)后,window.onload
事件总是会发生。
如果你想干预&#34;早期&#34;你可以使用document.ready
事件。在渲染过程中,无需等待图像加载。
如果您需要在脚本之前准备好图像(或任何其他内容&#34;),并且需要等待window.onload
。
例如,如果您正在实施&#34;幻灯片放映&#34;模式,您需要根据图像大小执行计算,您可能要等到window.onload
。否则,您可能会遇到一些随机问题,具体取决于图像的加载速度。您的脚本将与加载图像的线程同时运行。如果您的脚本足够长,或者服务器足够快,您可能不会注意到问题,如果图像恰好及时到达。但最安全的做法是允许图像加载。
document.ready
可能是一个很好的事件,你可以展示一些&#34; loading ...&#34;签署给用户,并在window.onload
,您可以完成任何需要加载资源的脚本,然后最终删除&#34;加载...&#34;登录。
示例: -
// 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;
答案 13 :(得分:2)
window.onload
是一个JavaScript内置函数。加载HTML页面时会触发window.onload
。 window.onload
只能写一次。
document.ready
是jQuery库的一个功能。当HTML和HTML文件中包含的所有JavaScript代码,CSS和图像被完全加载时,document.ready
会触发。
document.ready
可以根据要求多次编写。
答案 14 :(得分:1)
当您说$(document).ready(f)
时,您告诉脚本引擎执行以下操作:
$
并选择它,因为它不在本地范围内,它必须进行哈希表查找,这可能会也可能不会发生冲突。ready
,其中包含另一个哈希表查找所选对象以查找方法并调用它。在最好的情况下,这是2个哈希表查找,但是这忽略了jQuery所做的繁重工作,其中$
是jQuery所有可能输入的厨房接收器,所以另一个映射是可能会将查询分派给正确的处理程序。
或者,你可以这样做:
window.onload = function() {...}
将
onload
是否是属性,因为它是,它被称为函数。在最好的情况下,这会花费单个哈希表查找,这是必要的,因为必须提取onload
。
理想情况下,jQuery会将查询编译为字符串,这些字符串可以粘贴以执行您希望jQuery执行的操作,但不需要运行时调度jQuery。这样你就可以选择
eval
。答案 15 :(得分:0)
window.onload由DOM api提供,它说“在加载给定资源时触发load事件。”
“加载事件在文档加载过程结束时触发。这时,文档中的所有对象都在DOM中,并且所有图像,脚本,链接和子帧已完成加载。” DOM onload
但是在jQuery中,$(document).ready()仅在页面文档对象模型(DOM)准备好可以执行JavaScript代码时运行。其中不包括图片,脚本,iframe等。jquery ready event
因此jquery ready方法将比dom onload事件更早运行。
答案 16 :(得分:0)
时光飞逝,现在是 ECMAScript 2021,IE11 被越来越少的人使用。相比之下,最多的两个事件是 load
和 DOMContentLoaded
。
DOMContentLoaded
在 初始 HTML 文档完全加载和解析后触发。
load
在 DOMContentLoaded
和整个页面加载后触发,
等待所有依赖资源完成加载。资源示例:脚本、样式表、图像和 iframe 等。
重要提示:同步脚本将暂停解析 DOM。
这两个事件都可以用来判断DOM是否可以使用。例如:
<script>
// DOM hasn't been completely parsed
document.body; // null
document.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>