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 */
});
其他回答
窗口。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函数。
一个小提示:
一定要走窗户。addEventListener向窗口中添加一个事件。因为这样可以在不同的事件处理程序中执行代码。
正确的代码:
窗口。addEventListener('load', function () { alert('你好! ') }) 窗口。addEventListener('load', function () { alert('再见! ') })
无效的代码:
窗口。Onload = function () { alert('Hello!') //它不会工作!! } 窗口。Onload = function () { alert('再见! ') }
这是因为onload只是对象的属性,它会被覆盖。
与addEventListener类似,最好使用$(document).ready()而不是onload。
在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如,当一个页面流到浏览器时,另一个链接被单击)IE将触发$(document)。准备好活动。
如果$(document).ready()事件中的任何代码引用DOM对象,则存在找不到这些对象的可能性,并且可能发生Javascript错误。要么保护对这些对象的引用,要么将引用这些对象的代码延迟到窗口。负载的事件。
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
当页面上的所有内容(包括DOM(文档对象模型)内容和异步JavaScript、框架和图像)完全加载时,Windows加载事件将触发。你也可以使用body onload=。两者都是一样的;窗口。Onload = function(){} and <body Onload ="func();>是使用同一事件的不同方式。
jQuery文档。就绪函数事件执行的时间比窗口稍早。onload,在页面上加载DOM(文档对象模型)时调用。它不会等待图像、帧完全加载。
摘自以下文章: $document.ready()与window.onload()的区别