The difference between the ready () and window.onload () of jquery

Web development is often done in jquery with $ (document). The Window.onload method in ready () and JavaScript, both of which are loaded after the page is loaded, but there is a big difference. Recently encountered such a problem, query a number of articles, do a summary.

To put it simply, use the following table to indicate:

jquery's Ready () and Javascrpit's load ()

	Window.onload ()	$ (document). Ready ()
Loading time	You must wait for the page to load completely (including pictures, etc.) before executing the JS code	Just wait for the DOM structure in the Web page to load and execute the JS code.
Number of executions	Can only be executed once, if the second time, then the first execution will be overwritten	Can be executed more than once, nth times will not be overwritten by the last
Example	The following code does not execute correctly: Window.onload = function () {alert ("Text1");}; window.onload = function () {alert ("Text2");}; The result only outputs a second	The following code executes correctly: Results are output twice
Shorthand scheme	No	$ (function () {})

In general, window's load () is the OnLoad event used to set the body tag. But the onload event is triggered when all the elements of the page have been loaded, including the pictures on the page and the large tabular data. If the page is larger or the picture is too large, loading takes more time, causing the page to become unresponsive or the user has done something else.

The Ready () in Jeuery can be done after the page's Dom (node) is loaded, rather than waiting for all elements to be loaded. For example, just know that there is a picture somewhere on the page, and don't have to wait for it to show it to bind the point-and-click Method.

Load () is generally not recommended, here are the main words ($ (selector). Ready ()).

Principle:
When the jquery script loads, it sets a isready tag, listens to the Domcontentloaded event (this is not what the browser has, different browsers, jquery does not work the same way). Of course, when you call the Ready function, If IsReady is not set, it means that the page is not loaded, it will be executed with an array of functions to cache, when the page is finished loading, then the cached function one by one execution.
Detailed code analysis in jquery:

Readyfunction(FN) {//Binding ListenersBindready ();//if DOM loading is completeif(Jquery.isready)//Run this function nowFn.call (document, jQuery);//otherwise, save it.Else//Add a function to the cache arrayJQuery.readyList.push (function() {returnFn.call ( This, JQuery); } );return  This;}

Of course, jquery has a different bindready () function for the notification of different browser DOM loading completion

varReadybound =false;functionBindready () {if(Readybound)return; Readybound=true;//mozilla,opera,webkitnightlies support for domcontentloaded eventsif(Document.addeventlistener &&!)JQuery.browser.opera)//Use event callbacks directlyDocument.addeventlistener ("domcontentloaded", Jquery.ready,false );//if it is IE and is not embedded in the frame//you need to constantly check to see if the document is finished loadingif(jQuery.browser.msie && window = = top) (function(){if(Jquery.isready)return;Try {Document.documentElement.doScroll ("left");} Catch(Error) {SetTimeout (Arguments.callee, 0 );return;}//and execute any waiting functionsJquery.ready ();}) ();if(JQuery.browser.opera) Document.addeventlistener ("Domcontentloaded",function () {if(Jquery.isready)return; for(vari = 0; i < document.styleSheets.length; i++)if(document.stylesheets[i].disabled) {setTimeout (Arguments.callee,0 );return;}//and execute any waiting functionsJquery.ready ();},false);if(JQuery.browser.safari) {varnumstyles; (function(){if(Jquery.isready)return;if(Document.readystate! = "Loaded" && document.readystate! = "complete") {setTimeout (Arguments.callee, 0 );return;}if(Numstyles = = =undefined) numstyles= JQuery ("style, Link[rel=stylesheet]"). length;if(Document.styleSheets.length! = numstyles) {setTimeout (Arguments.callee, 0 );return;}//and execute any waiting functionsJquery.ready ();}) ();}//A fallback to window.onload.JQuery.event.add (window, "load", jquery.ready);}}

The most important thing to note here is that IE is the same as other browsers only if the page is not embedded in the frame, and executes $ (document) after the DOM is loaded. The contents of the Ready ().

Reference article: 1, http://www.cnblogs.com/kingwell/archive/2012/09/09/2677252.html

2, http://blog.csdn.net/xiebaochun/article/details/36375481

The difference between the ready () and window.onload () of jquery