window.onload vs $(document).ready()
Vai*_*ain 1205 javascript jquery unobtrusive-javascript dom-events
JavaScript window.onload和jQuery的$(document).ready()方法有什么区别？
Guf*_*ffa 1203
在readyHTML文档加载后发生的事件,而该onload事件时,所有内容(例如图像)也已经被加载后发生.
该onload事件是DOM中的标准事件,而ready事件特定于jQuery.ready事件的目的是它应该在文档加载后尽早发生,以便为页面中的元素添加功能的代码不必等待加载所有内容.
- @baptx:你错了.`ready`事件*是*特定于jQuery.如果它在浏览器中可用,则使用`DOMContentLoaded`事件,否则它会模拟它.DOM中没有确切的等价物,因为并非所有浏览器都支持`DOMContentLoaded`事件. (152认同)
- @baptx:我不认为这个问题很重要,我仍然没有. (55认同)
- 好的但是DOMContentLoaded存在相同的结果,也许你应该指定它 (18认同)
- 为什么选择downvote？如果你不解释你认为错的是什么,它就无法改善答案. (17认同)
- 没有诸如“ onload”之类的事件。onload是对象属性的名称，该属性存储在触发load事件时要调用的函数。 (4认同)
Pis*_*3.0 134
window.onload是内置的JavaScript事件,但由于它的实现在浏览器(Firefox,Internet Explorer 6,Internet Explorer 8和Opera)中有微妙的怪癖,jQuery提供了抽象的东西,并在页面的DOM准备好后立即触发(不等待图像等).document.ready
$(document).ready(请注意,它不是 document.ready,未定义)是一个jQuery函数,包装并提供以下事件的一致性:
document.ondomcontentready/document.ondomcontentloaded- 加载文档的DOM时可能会触发的新事件(可能是在加载图像等之前的某个时间); 再次,在Internet Explorer和世界其他地方略有不同- 和
window.onload(甚至在旧浏览器中实现),在整个页面加载时触发(图像,样式等)
- 这里有一个小小的误解:`window`的`load`事件在浏览器中合理地实现.jQuery和其他库试图解决的问题是你提到的问题,即在所有依赖资源(如图像和样式表)加载之后才会触发`load`事件,这可能是DOM之后的很长一段时间.完全加载,渲染并准备好进行交互.DOM准备就绪时在大多数浏览器中触发的事件称为"DOMContentLoaded",而不是"DOMContentReady". (14认同)
- @Tim Down：*合理* 是这里的关键词；至少一些对象嗅探曾经是必要的，即使使用`onload`（FF/IE/Opera 之间存在差异）。至于`DOMContentLoaded`，你是完全正确的。编辑以澄清。 (2认同)
- 写“document.ready”是不是不正确？document 对象没有 ready 方法，jQuery 对象有从 $(document) 调用返回的方法。如果我是对的，请编辑此答案，因为这非常令人困惑。 (2认同)
Jam*_*ard 85
$(document).ready()是一个jQuery事件.$(document).ready()一旦DOM准备好就会调用JQuery的方法(这意味着浏览器已经解析了HTML并构建了DOM树).这使您可以在文档准备好被操作后立即运行代码.
例如,如果浏览器支持DOMContentLoaded事件(就像许多非IE浏览器那样),那么它将触发该事件.(请注意,DOMContentLoaded事件仅在IE9 +中添加到IE中.)
可以使用两种语法:
$( document ).ready(function() {
console.log( "ready!" );
});
或速记版本:
$(function() {
console.log( "ready!" );
});
要点$(document).ready():
- 它不会等待加载图像.
- 用于在DOM完全加载时执行JavaScript.把事件处理程序放在这里.
- 可以多次使用.
- 更换
$用jQuery,当你收到"$没有定义". - 如果您想操纵图像,则不使用.请
$(window).load()改用.
window.onload()是一个本机JavaScript函数.该window.onload()事件触发时,所有的页面上的内容已加载,包括DOM(文档对象模型),横幅广告和图像.两者之间的另一个区别是,虽然我们可以有多个$(document).ready()函数,但我们只能有一个onload函数.
- 小问题:IE的讨论措辞不力.不是IE(8和之前)**"不能安全地触发"**直到文件的readyState达到完成,这是IE**缺少一个DOMContentLoaded事件.不是"安全"问题,而是IE中缺少的功能,在IE 9中添加. (4认同)
Viv*_*vek 42
一个Windows负载事件触发时,所有的页面上的内容满载包括DOM(文档对象模型)的内容和异步的JavaScript,框架和图像.你也可以使用body onload =.两者都是一样的; window.onload = function(){}并且<body onload="func();">是使用相同事件的不同方式.
jQuery$document.ready函数事件比window.onload页面上加载DOM(Document对象模型)一样早一点执行并调用.它不会等待图像,帧完全加载.
摘自以下文章:
有何$document.ready()不同之处window.onload()
- 我可能会同意,如果不是逐字逐句复制的话. (3认同)
dec*_*eck 22
使用$(document).ready()Internet Explorer时要小心谨慎.如果在加载整个文档之前 HTTP请求被中断(例如,当页面流式传输到浏览器时,单击另一个链接)IE将触发该$(document).ready事件.
如果$(document).ready()事件中的任何代码引用DOM对象,则可能无法找到这些对象,并且可能发生Javascript错误.保护对这些对象的引用,或将引用这些对象的代码推迟到window.load事件.
我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题
小智 21
$(document).ready(function() {
// Executes when the HTML document is loaded and the DOM is ready
alert("Document is ready");
});
// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {
// Executes when complete page is fully loaded, including
// all frames, objects and images
alert("Window is loaded");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>Иль*_*ько 19
小提示:
始终使用window.addEventListener向窗口添加事件.因为这样,您可以在不同的事件处理程序中执行代码.
正确的代码:
window.addEventListener('load', function () {
alert('Hello!')
})
window.addEventListener('load', function () {
alert('Bye!')
})无效的代码:
window.onload = function () {
alert('Hello!') // it will not work!!!
}
window.onload = function () {
alert('Bye!')
}这是因为onload只是对象的属性,被覆盖.
通过类比addEventListener,最好使用$(document).ready()而不是onload.
- 这不能回答所问的问题。 (2认同)
abs*_*tor 17
活动
$(document).on('ready', handler)从jQuery绑定到ready事件.加载DOM时调用处理程序.像图像这样的资产可能仍然缺失.如果文档在绑定时已准备就绪,则永远不会调用它.jQuery使用DOMContentLoaded -Event,如果不可用则模拟它.
$(document).on('load', handler)是从服务器加载所有资源后将触发的事件.现在加载图像.虽然onload事件是原始的HTML事件,准备由jQuery的建立.
功能
$(document).ready(handler)实际上是一个承诺.如果在调用时文档准备就绪,将立即调用处理程序.否则它会绑定到ready-Event.
在jQuery 1.8之前,$(document).load(handler)作为别名存在$(document).on('load',handler).
进一步阅读
Ali*_*eza 15
这$(document).ready()是一个jQuery事件,它发生在HTML文档完全加载时,而window.onload事件发生在以后,当包括页面上的图像加载时.
window.onload也是DOM中的纯javascript事件,而$(document).ready()事件是jQuery中的一个方法.
$(document).ready() 通常是jQuery的包装器,以确保所有加载的元素都在jQuery中使用...
查看jQuery源代码以了解它是如何工作的:
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
另外,我创建了下面的图像作为两者的快速参考:
小智 11
要记住的一件事(或者我应该回忆一下)是你不能onload像你一样堆叠ready.换句话说,jQuery magic允许ready在同一页面上使用多个s,但是你不能这样做onload.
最后一个onload将否决任何先前的onloads.
一个很好的处理方法是使用一个显然由Simon Willison编写的函数,并在使用多个JavaScript上载函数中进行了描述.
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 */
});
小智 11
Document.ready(一个jQuery事件)将在所有元素到位时触发,并且可以在JavaScript代码中引用它们,但不必加载内容.Document.ready加载HTML文档时执行.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
该window.load然而,将等待页面被完全加载.这包括内框,图像等.
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
时间过得真快，现在已经是 ECMAScript 2021 了，IE11 使用的人越来越少了。最具对比性的两个事件是load和DOMContentLoaded。
DOMContentLoaded在初始HTML 文档完全加载和解析后触发。
loadDOMContentLoaded在整个页面加载完毕
后触发，等待所有依赖资源完成加载。资源示例：脚本、样式表、图像和 iframe 等。
重要提示：同步脚本将暂停 DOM 解析。
这两个事件都可以用来判断 DOM 是否能够使用。举些例子：
<script>
// DOM hasn't been completely parsed
document.body; // null
window.addEventListener('DOMContentLoaded', () => {
// Now safely manipulate DOM
document.querySelector('#id');
document.body.appendChild();
});
/**
* Should be used only to detect a fully-loaded page.
*
* If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
*/
window.addEventListener('load', () => {
// Safely manipulate DOM too
document.links;
});
</script>
加载HTML文档时，将发生document.ready事件，而在加载window.onload所有内容（图像等）后，该事件将始终在以后发生。
document.ready如果您想在渲染过程中“尽早”介入，而不必等待图像加载，则可以使用该事件。如果在脚本“执行某些操作”之前需要准备好图像（或其他“内容”），则需要等到window.onload。
例如，如果要实现“幻灯片放映”模式，并且需要根据图像尺寸执行计算，则可能要等到window.onload。否则，您可能会遇到一些随机问题，具体取决于图像加载的速度。您的脚本将与加载图像的线程同时运行。如果您的脚本足够长，或者服务器足够快，那么如果图像恰好及时到达，您可能不会注意到问题。但是最安全的做法是允许加载图像。
document.ready对于您来说向用户显示“正在加载...”符号可能是一个不错的事件，然后window.onload，您就可以完成需要加载资源的所有脚本，然后最终删除“正在加载...”符号。
例子 ：-
// 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;