JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?
当前回答
窗口。onload是内置的JavaScript事件,但是由于它的实现在浏览器(Firefox、Internet Explorer 6、Internet Explorer 8和Opera)上有一些微妙的特点,jQuery提供了文档。ready,它将这些抽象出来,并在页面的DOM准备好后立即触发(不等待图像等)。
美元(文档)。准备(注意,这不是文档。ready(未定义)是一个jQuery函数,包装并提供以下事件的一致性:
DOMContentLoaded -一个新的事件,当文档的DOM加载时触发(这可能是在图像等加载之前的一段时间);同样,在ie浏览器和世界其他地方略有不同 和窗口。Onload(即使在旧浏览器中也实现了),当整个页面加载(图像,样式等)时触发。
其他回答
事件
美元(文档)。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)的别名存在。
进一步的阅读
时机 在函数就绪时 一个例子 承诺 删除的事件别名
当你说$(document).ready(f)时,你告诉脚本引擎做以下事情:
获取对象文档并推送它,因为它不在本地范围内,它必须执行哈希表查找来查找文档的位置,幸运的是,文档是全局绑定的,所以这是一个单一的查找。 找到对象$并选择它,因为它不在本地范围内,它必须进行哈希表查找,这可能有冲突,也可能没有冲突。 在全局作用域中找到对象f,这是另一个哈希表查找,或者push函数对象并初始化它。 调用所选对象的ready,这涉及到对所选对象的另一个哈希表查找,以找到方法并调用它。 完成了。
在最好的情况下,这是2次哈希表查找,但这忽略了jQuery所做的繁重工作,其中$是jQuery所有可能输入的厨子,因此可能有另一个映射将查询分派给正确的处理程序。
或者,你可以这样做:
window.onload = function() {...}
这将
在全局范围内找到对象窗口,如果JavaScript是优化的,它会知道因为窗口没有改变,它已经有了选择的对象,所以什么都不需要做。 函数对象被压入操作数堆栈。 通过查找哈希表来检查onload是否是一个属性,因为它是,所以它像函数一样被调用。
在最好的情况下,这只需要查找一次哈希表,这是必要的,因为必须获取onload。
理想情况下,jQuery会将它们的查询编译为字符串,这些字符串可以被粘贴来做你想要jQuery做的事情,但没有jQuery的运行时分派。通过这种方式,您可以任选其一
像我们今天做的那样动态分派jquery。 让jQuery编译你的查询纯JavaScript字符串,可以传递给eval做你想要的。 将2的结果直接复制到代码中,并跳过eval的代价。
窗口。onload是由DOM api提供的,它说“加载事件在给定资源加载时触发”。
"加载事件在文档加载过程结束时触发。此时,文档中的所有对象都在DOM中,所有图像、脚本、链接和子帧都已完成加载。” DOM onload
但是在jQuery中,$(document).ready()只会在页面文档对象模型(DOM)准备好执行JavaScript代码时运行。这并不包括图像,脚本,iframes等jquery就绪事件
因此jquery ready方法将在dom onload事件之前运行。
当页面上的所有内容(包括DOM(文档对象模型)内容和异步JavaScript、框架和图像)完全加载时,Windows加载事件将触发。你也可以使用body onload=。两者都是一样的;窗口。Onload = function(){} and <body Onload ="func();>是使用同一事件的不同方式。
jQuery文档。就绪函数事件执行的时间比窗口稍早。onload,在页面上加载DOM(文档对象模型)时调用。它不会等待图像、帧完全加载。
摘自以下文章: $document.ready()与window.onload()的区别
文档。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");
});
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期