JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?
当前回答
有一件事要记住(或者我应该说要记住),你不能像准备好了一样叠在一起。换句话说,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 */
});
其他回答
ready事件发生在HTML文档加载之后,而onload事件发生在稍后,当所有内容(例如图像)也已加载时。
onload事件是DOM中的标准事件,而ready事件是特定于jQuery的。ready事件的目的是,它应该在文档加载后尽可能早地发生,以便向页面中的元素添加功能的代码不必等待所有内容加载完毕。
当你说$(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是内置的JavaScript事件,但是由于它的实现在浏览器(Firefox、Internet Explorer 6、Internet Explorer 8和Opera)上有一些微妙的特点,jQuery提供了文档。ready,它将这些抽象出来,并在页面的DOM准备好后立即触发(不等待图像等)。
美元(文档)。准备(注意,这不是文档。ready(未定义)是一个jQuery函数,包装并提供以下事件的一致性:
DOMContentLoaded -一个新的事件,当文档的DOM加载时触发(这可能是在图像等加载之前的一段时间);同样,在ie浏览器和世界其他地方略有不同 和窗口。Onload(即使在旧浏览器中也实现了),当整个页面加载(图像,样式等)时触发。
$(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函数。
$(文档)时函数(){ //当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 " > < /脚本>
推荐文章
- 如何使用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中检查字符串包含另一个子字符串的最快方法?