JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?
ready事件发生在HTML文档加载之后，而onload事件发生在稍后，当所有内容(例如图像)也已加载时。
onload事件是DOM中的标准事件，而ready事件是特定于jQuery的。ready事件的目的是，它应该在文档加载后尽可能早地发生，以便向页面中的元素添加功能的代码不必等待所有内容加载完毕。
窗口。onload是内置的JavaScript事件，但是由于它的实现在浏览器(Firefox、Internet Explorer 6、Internet Explorer 8和Opera)上有一些微妙的特点，jQuery提供了文档。ready，它将这些抽象出来，并在页面的DOM准备好后立即触发(不等待图像等)。
美元(文档)。准备(注意，这不是文档。ready(未定义)是一个jQuery函数，包装并提供以下事件的一致性:
DOMContentLoaded -一个新的事件，当文档的DOM加载时触发(这可能是在图像等加载之前的一段时间);同样，在ie浏览器和世界其他地方略有不同 和窗口。Onload(即使在旧浏览器中也实现了)，当整个页面加载(图像，样式等)时触发。
在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如，当一个页面流到浏览器时，另一个链接被单击)IE将触发$(document)。准备好活动。
如果$(document).ready()事件中的任何代码引用DOM对象，则存在找不到这些对象的可能性，并且可能发生Javascript错误。要么保护对这些对象的引用，要么将引用这些对象的代码延迟到窗口。负载的事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
$(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。把事件处理程序放在这里。 可多次使用。 当收到“$ is not defined”时，将$替换为jQuery。 如果您想操作图像，则不使用。请使用$(window).load()代替。
window.onload()是一个原生JavaScript函数。当页面上的所有内容(包括DOM(文档对象模型)、横幅广告和图像)都已加载时，window.onload()事件将触发。两者之间的另一个区别是，虽然我们可以有多个$(document).ready()函数，但我们只能有一个onload函数。
当页面上的所有内容(包括DOM(文档对象模型)内容和异步JavaScript、框架和图像)完全加载时，Windows加载事件将触发。你也可以使用body onload=。两者都是一样的;窗口。Onload = function(){} and <body Onload ="func();>是使用同一事件的不同方式。
jQuery文档。就绪函数事件执行的时间比窗口稍早。onload，在页面上加载DOM(文档对象模型)时调用。它不会等待图像、帧完全加载。
摘自以下文章: $document.ready()与window.onload()的区别
有一件事要记住(或者我应该说要记住)，你不能像准备好了一样叠在一起。换句话说，jQuery神奇地允许在同一个页面上有多个readys，但是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 */
});
事件
美元(文档)。on('ready'， handler)绑定到来自jQuery的ready事件。加载DOM时调用处理程序。像图像这样的资产可能仍然缺失。如果文档在绑定时已经准备好，那么它将永远不会被调用。jQuery为此使用DOMContentLoaded-Event，如果不可用则模拟它。
美元(文档)。On ('load'， handler)是一个事件，当所有资源从服务器加载时将被触发。图像现在已经加载。onload是一个原始HTML事件，而ready是由jQuery构建的。
功能
$(document).ready(handler)实际上是一个承诺。如果在调用时文档已经准备好，则处理程序将立即被调用。否则它会绑定到ready-Event。
在jQuery 1.8之前，$(document).load(handler)作为$(document).on('load'，handler)的别名存在。
进一步的阅读
时机 在函数就绪时 一个例子 承诺 删除的事件别名
$(文档)时函数(){ //当HTML文档被加载并且DOM准备好时执行 警报(“文件已准备好”); })； // .load()方法从jQuery 1.8开始已弃用 美元(窗口)。On ("load"， function() { //当整个页面完全加载时执行，包括 //所有帧，对象和图像 alert(“窗口已加载”); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " > < /脚本>
窗口。onload是JavaScript内置函数。窗口。当HTML页面加载时，onload触发器。窗口。Onload只能写入一次。
文档。ready是jQuery库的一个函数。文档。ready在HTML文件中包含的HTML和所有JavaScript代码、CSS和图像完全加载时触发。 文档。Ready可以根据需要写多次。
文档。ready (jQuery事件)将在所有元素就位时触发，并且可以在JavaScript代码中引用它们，但不一定加载内容。文档。ready在加载HTML文档时执行。
$(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");
});
该文档。ready事件发生时，HTML文档已加载，窗口。Onload事件总是稍后发生，当所有内容(图像等)都已加载。
你可以使用文档。Ready事件，如果你想在渲染过程中“早期”介入，而不等待图像加载。 如果你需要图像(或任何其他“内容”)在你的脚本“做一些事情”之前准备好，你需要等到window.onload。
例如，如果您正在实现“幻灯片显示”模式，并且需要根据图像大小执行计算，则可能希望等到window.onload。否则，您可能会遇到一些随机问题，这取决于图像加载的速度。您的脚本将与加载图像的线程同时运行。如果脚本足够长，或者服务器足够快，如果图像恰好及时到达，您可能不会注意到问题。但是最安全的做法是允许图像被加载。
文档。Ready可以是一个很好的事件，让你向用户显示一些“loading…”标志，并在窗口上显示。onload，你可以完成任何需要加载资源的脚本，然后最后删除“Loading…”标志。
例子:-
// 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;
$(document).ready()是一个jQuery事件，发生在HTML文档完全加载时，而窗口。Onload事件稍后发生，当页面上的所有内容(包括图像)都加载时。
窗口。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;
};
我还创建了下面的图像作为两者的快速参考:
当你说$(document).ready(f)时，你告诉脚本引擎做以下事情:
获取对象文档并推送它，因为它不在本地范围内，它必须执行哈希表查找来查找文档的位置，幸运的是，文档是全局绑定的，所以这是一个单一的查找。 找到对象$并选择它，因为它不在本地范围内，它必须进行哈希表查找，这可能有冲突，也可能没有冲突。 在全局作用域中找到对象f，这是另一个哈希表查找，或者push函数对象并初始化它。 调用所选对象的ready，这涉及到对所选对象的另一个哈希表查找，以找到方法并调用它。 完成了。
在最好的情况下，这是2次哈希表查找，但这忽略了jQuery所做的繁重工作，其中$是jQuery所有可能输入的厨子，因此可能有另一个映射将查询分派给正确的处理程序。
或者，你可以这样做:
window.onload = function() {...}
这将
在全局范围内找到对象窗口，如果JavaScript是优化的，它会知道因为窗口没有改变，它已经有了选择的对象，所以什么都不需要做。 函数对象被压入操作数堆栈。 通过查找哈希表来检查onload是否是一个属性，因为它是，所以它像函数一样被调用。
在最好的情况下，这只需要查找一次哈希表，这是必要的，因为必须获取onload。
理想情况下，jQuery会将它们的查询编译为字符串，这些字符串可以被粘贴来做你想要jQuery做的事情，但没有jQuery的运行时分派。通过这种方式，您可以任选其一
像我们今天做的那样动态分派jquery。 让jQuery编译你的查询纯JavaScript字符串，可以传递给eval做你想要的。 将2的结果直接复制到代码中，并跳过eval的代价。
一个小提示:
一定要走窗户。addEventListener向窗口中添加一个事件。因为这样可以在不同的事件处理程序中执行代码。
正确的代码:
窗口。addEventListener('load'， function () { alert('你好! ') }) 窗口。addEventListener('load'， function () { alert('再见! ') })
无效的代码:
窗口。Onload = function () { alert('Hello!') //它不会工作!! ｝ 窗口。Onload = function () { alert('再见! ') ｝
这是因为onload只是对象的属性，它会被覆盖。
与addEventListener类似，最好使用$(document).ready()而不是onload。
窗口。onload是由DOM api提供的，它说“加载事件在给定资源加载时触发”。
"加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，所有图像、脚本、链接和子帧都已完成加载。” DOM onload
但是在jQuery中，$(document).ready()只会在页面文档对象模型(DOM)准备好执行JavaScript代码时运行。这并不包括图像，脚本，iframes等jquery就绪事件
因此jquery ready方法将在dom onload事件之前运行。
时间过得真快，现在是ECMAScript 2021年，人们越来越少使用IE11。相反，最多的两个事件是load和DOMContentLoaded。
DOMContentLoaded在初始HTML文档完全加载和解析后触发。
load在DOMContentLoaded和整个页面加载后触发， 等待所有相关资源完成加载。资源示例:脚本，样式表，图像和iframe等。
重点:同步脚本将暂停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>
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行，而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- HTML5文本区域占位符不出现
- 添加javascript选项选择
- 在Node.js中克隆对象
- 我如何捕捉Ajax查询后错误?
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
