JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?
当前回答
在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如,当一个页面流到浏览器时,另一个链接被单击)IE将触发$(document)。准备好活动。
如果$(document).ready()事件中的任何代码引用DOM对象,则存在找不到这些对象的可能性,并且可能发生Javascript错误。要么保护对这些对象的引用,要么将引用这些对象的代码延迟到窗口。负载的事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
其他回答
窗口。onload:普通的JavaScript事件。
文档。ready:整个HTML加载完成时的特定jQuery事件。
该文档。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(f)时,你告诉脚本引擎做以下事情:
获取对象文档并推送它,因为它不在本地范围内,它必须执行哈希表查找来查找文档的位置,幸运的是,文档是全局绑定的,所以这是一个单一的查找。 找到对象$并选择它,因为它不在本地范围内,它必须进行哈希表查找,这可能有冲突,也可能没有冲突。 在全局作用域中找到对象f,这是另一个哈希表查找,或者push函数对象并初始化它。 调用所选对象的ready,这涉及到对所选对象的另一个哈希表查找,以找到方法并调用它。 完成了。
在最好的情况下,这是2次哈希表查找,但这忽略了jQuery所做的繁重工作,其中$是jQuery所有可能输入的厨子,因此可能有另一个映射将查询分派给正确的处理程序。
或者,你可以这样做:
window.onload = function() {...}
这将
在全局范围内找到对象窗口,如果JavaScript是优化的,它会知道因为窗口没有改变,它已经有了选择的对象,所以什么都不需要做。 函数对象被压入操作数堆栈。 通过查找哈希表来检查onload是否是一个属性,因为它是,所以它像函数一样被调用。
在最好的情况下,这只需要查找一次哈希表,这是必要的,因为必须获取onload。
理想情况下,jQuery会将它们的查询编译为字符串,这些字符串可以被粘贴来做你想要jQuery做的事情,但没有jQuery的运行时分派。通过这种方式,您可以任选其一
像我们今天做的那样动态分派jquery。 让jQuery编译你的查询纯JavaScript字符串,可以传递给eval做你想要的。 将2的结果直接复制到代码中,并跳过eval的代价。
文档。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");
});
一个小提示:
一定要走窗户。addEventListener向窗口中添加一个事件。因为这样可以在不同的事件处理程序中执行代码。
正确的代码:
窗口。addEventListener('load', function () { alert('你好! ') }) 窗口。addEventListener('load', function () { alert('再见! ') })
无效的代码:
窗口。Onload = function () { alert('Hello!') //它不会工作!! } 窗口。Onload = function () { alert('再见! ') }
这是因为onload只是对象的属性,它会被覆盖。
与addEventListener类似,最好使用$(document).ready()而不是onload。