JavaScript的window.onload
和jQuery的$(document).ready()
方法有什么区别?
需要记住的一件事(或者说是回忆起来的)是无法像使用ready
那样堆叠多个onload
。换句话说,jQuery魔法允许在同一页上有多个ready
,但你不能用onload
这样做。
最后一个onload
会覆盖之前的任何onload
。
处理这个问题的一种好方法是使用由Simon Willison编写并在使用多个JavaScript Onload函数中描述的函数。
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
(一个jQuery事件)会在所有元素就位并可以在JavaScript代码中引用时触发,但内容不一定已加载。当HTML文档加载完毕时,Document.ready
执行。
$(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");
});
当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;
时光荏苒,现在已经是ECMAScript 2021了,而IE11的使用者越来越少。最大的两个差异在于 load
和 DOMContentLoaded
。
DOMContentLoaded
在初始 HTML 文档被完全加载和解析后触发。
load
在 DOMContentLoaded
触发后整个页面加载完成之后,等待所有依赖资源加载完成 后触发。这些资源包括:脚本、样式表、图片和 iframe 等。
IMPORTANT: 同步脚本会暂停 DOM 解析。
这两个事件都可以用来确定 DOM 是否可以使用。例如:
<script>
// DOM hasn't been completely parsed
document.body; // null
window.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>
window.onload
是JavaScript内置函数,当HTML页面加载时触发。 window.onload
只能写一次。
document.ready
是jQuery库的一个函数,当HTML和所有JavaScript代码、CSS和包含在HTML文件中的图像完全加载时触发。document.ready
可以根据需要多次编写。
$(document).ready(f)
时,你告诉脚本引擎执行以下操作:
$
,因为它不在本地作用域中,所以必须进行哈希表查找,可能会有碰撞。ready
方法,这涉及对选定对象进行另一个哈希表查找以查找方法并调用它。$
是所有可能输入到jQuery的厨房水槽,因此可能还有另一个映射来将查询分派到正确的处理程序。window.onload = function() {...}
这将会
onload
是否是属性,既然是属性,就像调用函数一样调用。在最好的情况下,这只需花费一个哈希表查找,这是必要的,因为必须获取onload
。
理想情况下,jQuery会将他们的查询编译成可以粘贴的字符串,以执行您想要的jQuery操作,但不需要运行时分派jQuery。这样,您就有以下选项:
eval
的成本。window.onload是由DOM API提供的,它表示“当给定资源已加载时,加载事件将触发”。
“加载事件在文档加载过程的末尾触发。此时,文档中的所有对象都在DOM中,并且所有图像、脚本、链接和子框架都已完成加载。”DOM onload
但是,在jQuery中,$(document).ready()只有在页面文档对象模型(DOM)准备好执行JavaScript代码时才会运行。这不包括图像、脚本、iframes等。jquery ready event
因此,jquery ready方法将比DOM onload事件更早运行。
$().ready()
的方式有时会在window.onload
之后触发。 - Shikkediel$(window).on('load', function(){});
是jQuery中window.onload的等效写法。 - JP Zhang