window.onload vs $（document）.ready（）
JavaScript的window.onload和jQuery的$(document).ready()方法有什么区别？
ready事件发生在加载HTML文档之后，而onload事件发生在稍后，当所有内容（例如图像）也被加载时。
onload事件是DOM中的标准事件，而ready事件特定于jQuery。 ready事件的目的是在文档加载后尽早出现，以便为页面中的元素添加function的代码不必等待所有的内容加载。
window.onload是内置的JavaScript事件，但是由于它的实现在浏览器（Firefox，Internet Explorer 6，Internet Explorer 8和Opera ）中存在微妙的偏差，所以jQuery提供了document.ready ，它将这些事件抽象出来，并且尽快的触发因为页面的DOM准备就绪（不会等待图像等）。
$(document).ready （注意，它不是 document.ready ，它是未定义的）是一个jQuery函数，包装和提供以下事件的一致性 ：
-
document.ondomcontentready/document.ondomcontentloaded– 一个新的事件，当文档的DOM被加载时（这可能是图像加载之前的一段时间）触发; 再次，在Internet Explorer和世界其他地方略有不同 - 和
window.onload（即使在旧浏览器中也可以实现），当整个页面加载时（图像，样式等）
$(document).ready()是一个jQuery事件。 JQuery的$(document).ready()方法在DOM准备就绪后被调用（这意味着浏览器已经parsing了HTML并构build了DOM树）。 这允许您在文档准备好被操作后立即运行代码。
例如，如果浏览器支持DOMContentLoaded事件（与许多非IE浏览器一样），则会触发该事件。 （请注意，DOMContentLoaded事件仅在IE9 +中添加到IE中。）
两种语法可以用于这个：
$( document ).ready(function() { console.log( "ready!" ); });
或者简写版本：
$(function() { console.log( "ready!" ); });
$(document).ready()要点：
- 它不会等待图像被加载。
- 用于在DOM完全加载时执行JavaScript。 把事件处理程序放在这里。
- 可以多次使用。
- 当您收到“$未定义”时，用
$replace$。 - 如果你想操作图像，不用。 使用
$(window).load()来代替。
window.onload()是一个原生的JavaScript函数。 window.onload()事件触发页面上的所有内容加载，包括DOM（文档对象模型），横幅广告和图像。 两者之间的另一个区别是，虽然我们可以有多个$(document).ready()函数，但我们只能有一个onload函数。
当您的页面上的所有内容都被完全加载，包括DOM（文档对象模型）内容和asynchronousJavaScript ， 框架和图像时，将触发Windows加载事件。 你也可以使用body onload =。 两者都是一样的; window.onload = function(){}和<body onload="func();">是使用相同事件的不同方式。
jQuery $document.ready函数事件比window.onload早一点执行，一旦DOM（Document对象模型）加载到页面上，就会调用它。 它不会等待图像，帧完全加载 。
从以下文章中获取： $document.ready()与window.onload()
在Internet Explorer中使用$(document).ready()时要小心。 如果一个HTTP请求在整个文档被加载之前中断（例如，当一个页面正在stream向浏览器，另一个链接被点击），IE将触发$(document).ready事件。
如果$(document).ready()事件中的任何代码引用了DOM对象，那么$(document).ready()可能找不到这些对象，并且可能会发生Javascript错误。 要么保护你对那些对象的引用，要么推迟那些引用那些对象到window.load事件的代码。
我无法在其他浏览器（特别是Chrome和Firefox）中重现此问题，
活动
$(document).on('ready', handler)绑定到jQuery的ready事件。 处理程序在DOM加载时被调用。 类似图片的资源可能仍然缺失 。 如果文档在绑定时已经准备好，它将永远不会被调用。 jQuery使用DOMContentLoaded -Event来模拟它，如果不可用的话。
$(document).on('load', handler)是一旦从服务器加载所有资源就会被触发的事件。 图像现在加载。 虽然onload是一个原始的HTML事件，但是jQuery 已经准备好了。
function
$(document).ready(handler)实际上是一个承诺 。 如果文档在调用时已经准备好，处理程序将立即被调用。 否则它绑定到ready事件。
在jQuery 1.8之前 ， $(document).load(handler)作为$(document).on('load',handler)的别名而存在。
进一步阅读
- 时机
- 在function准备
- 一个例子
- 承诺
- 已删除的事件别名
$(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"); });
window.onload： 一个正常的JavaScript事件。
document.ready： 当整个HTML被加载时的一个特定的jQuery事件。
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"); });
有一件事要记住（或者我应该说回想一下），就是你不能像ready那样，随便堆放。 换句话说，jQuery魔法允许在同一页面上有多个ready ，但是你不能用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 */ });
document.ready事件在加载HTML文档时发生，并且当所有内容（图像等）被加载时，window.onload事件总是在后面发生。 如果您想要在渲染过程中“尽早”干预，则可以使用document.ready事件，而无需等待加载图像。 如果您需要在脚本“做某些事情”之前准备好图像（或任何其他“内容”），则需要等到window.onload。
例如，如果您正在实施“幻灯片放映”模式，并且您需要根据图像大小进行计算，则可能需要等到window.onlad。 否则，您可能会遇到一些随机问题，具体取决于加载图像的速度。 您的脚本将与加载图像的线程同时运行。 如果你的脚本足够长，或者服务器足够快，如果图像碰巧及时到达，你可能不会注意到问题。 但最安全的做法是允许图像加载。 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;
$(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; };
此外，我已经创build了下面的图像作为两个快速参考：
window.onload是一个JavaScript内置函数。 window.onload在加载HTML页面时触发。 window.onload只能写一次。
document.ready是jQuery库的一个function。 当HTML和包含在HTML文件中的所有JavaScript代码，CSS和图像被完全加载时， document.ready会触发。 document.ready可以根据需要多次写入。
