JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?
当前回答
窗口。onload是由DOM api提供的,它说“加载事件在给定资源加载时触发”。
"加载事件在文档加载过程结束时触发。此时,文档中的所有对象都在DOM中,所有图像、脚本、链接和子帧都已完成加载。” DOM onload
但是在jQuery中,$(document).ready()只会在页面文档对象模型(DOM)准备好执行JavaScript代码时运行。这并不包括图像,脚本,iframes等jquery就绪事件
因此jquery ready方法将在dom onload事件之前运行。
其他回答
在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如,当一个页面流到浏览器时,另一个链接被单击)IE将触发$(document)。准备好活动。
如果$(document).ready()事件中的任何代码引用DOM对象,则存在找不到这些对象的可能性,并且可能发生Javascript错误。要么保护对这些对象的引用,要么将引用这些对象的代码延迟到窗口。负载的事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
窗口。onload:普通的JavaScript事件。
文档。ready:整个HTML加载完成时的特定jQuery事件。
事件
美元(文档)。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)的别名存在。
进一步的阅读
时机 在函数就绪时 一个例子 承诺 删除的事件别名
有一件事要记住(或者我应该说要记住),你不能像准备好了一样叠在一起。换句话说,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 */
});
$(文档)时函数(){ //当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中检查字符串包含另一个子字符串的最快方法?