JavaScript window.onload和jQuery $(document).ready()方法之间有什么区别？
window.onload与$（document）.ready（）
Document.ready (a jQuery event) will fire when all the elements are in place, and they can be referenced in the JavaScript code, but the content is not necessarily loaded. Document.ready executes when the HTML document is loaded.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
The window.load however will wait for the page to be fully loaded. This includes inner frames, images, etc.
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
The document.ready event occurs when the HTML document has been loaded, and the window.onload event occurs always later, when all content (images, etc) has been loaded.
You can use the document.ready event if you want to intervene "early" in the rendering process, without waiting for the images to load.
If you need the images (or any other "content") ready before your script "does something", you need to wait until window.onload.
For instance, if you are implementing a "Slide Show" pattern, and you need to perform calculations based on image sizes, you may want to wait until window.onload. Otherwise, you might experience some random problems, depending on how fast the images will get loaded. Your script would be running concurrently with the thread that loads images. If your script is long enough, or the server is fast enough, you may not notice a problem, if images happen to arrive in time. But the safest practice would be allowing for images to get loaded.
document.ready could be a nice event for you to show some "loading..." sign to users, and upon window.onload, you can complete any scripting that needed resources loaded, and then finally remove the "Loading..." sign.
Examples :-
// 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;
window.onload is a JavaScript inbuilt function. window.onload trigger when the HTML page loaded. window.onload can be written only once.
document.ready is a function of the jQuery library. document.ready triggers when HTML and all JavaScript code, CSS, and images which are included in the HTML file are completely loaded.
document.ready can be written multiple times according to requirements.
window.onload: A normal JavaScript event.
document.ready: A specific jQuery event when the entire HTML has been loaded.
一个Windows负载事件触发时，所有的页面上的内容满载包括DOM（文档对象模型）的内容和异步的JavaScript，框架和图像。您还可以使用body onload =。两者是相同的；window.onload = function(){}并且<body onload="func();">是使用同一事件的不同方式。
jQuery$document.ready函数事件的执行时间比window.onloadDOM（文档对象模型）加载到您的页面上的时间要早一些。它不会等待图像和框架完全加载。
摘自以下文章：与...
有何$document.ready()不同window.onload()
在$(document).ready()Internet Explorer 上使用时要小心。如果在整个文档加载之前 HTTP请求被中断（例如，当页面流向浏览器时，单击了另一个链接），IE将触发该$(document).ready事件。
如果$(document).ready()事件中的任何代码引用DOM对象，则可能找不到这些对象，并且可能会发生Javascript错误。要么保护您对那些对象的引用，要么延迟将那些对象引用到window.load事件的代码。
我无法在其他浏览器（特别是Chrome和Firefox）中重现此问题
$(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>$(document).ready() is a jQuery event. JQuery’s $(document).ready() method gets called as soon as the DOM is ready (which means that the browser has parsed the HTML and built the DOM tree). This allows you to run code as soon as the document is ready to be manipulated.
For example, if a browser supports the DOMContentLoaded event (as many non-IE browsers do), then it will fire on that event. (Note that the DOMContentLoaded event was only added to IE in IE9+.)
Two syntaxes can be used for this:
$( document ).ready(function() {
console.log( "ready!" );
});
Or the shorthand version:
$(function() {
console.log( "ready!" );
});
Main points for $(document).ready():
- It will not wait for the images to be loaded.
- Used to execute JavaScript when the DOM is completely loaded. Put event handlers here.
- Can be used multiple times.
- Replace
$withjQuerywhen you receive "$ is not defined." - Not used if you want to manipulate images. Use
$(window).load()instead.
window.onload() is a native JavaScript function. The window.onload() event fires when all the content on your page has loaded, including the DOM (document object model), banner ads and images. Another difference between the two is that, while we can have more than one $(document).ready() function, we can only have one onload function.
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.onload is provided by DOM api and it says " the load event fires when a given resource has loaded".
"The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading." DOM onload
But in jQuery $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This does not include images, scripts, iframes etc. jquery ready event
So the jquery ready method will run earlier than the the dom onload event.