The difference between jQuery ready and Window onload

See an article on the Internet to share with you:

"We all know that a lot of times, after the page has been loaded, we need to do some initialization actions." For example, run some JS effects, set up the form, and so on. How do you know the page is loaded?
In general, the OnLoad Monitor window's Load event is set to the body tag. But the load event is triggered when the page's elements are all loaded, and if the page is larger or the picture is too large, it causes the user to do something else when the initialization code is not executed. The jquery library provides a very handy function ($ (selector). Ready ()), so that we can do the right thing after the page's Dom is loaded (which, of course, depends on the support of the user's browser). Instead of waiting for all elements to be loaded to complete. For example:

1 $ (document). Ready (function () {alert (' use in page Script tag ')}), 2 $ (document). Ready (function () {alert (' JS file ')});

Now let's look at the implementation of this function.
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:

Let's look at jquery if you implement a different browser DOM loading complete notification bindready () function:

 1 var readybound = false; 2 function Bindready () {3 if (readybound) return; 4 Readybound = true; 5 6//mozilla,opera,webkitnightlies support Domcontent Loaded Event 7 if (Document.addeventlistener &&!jquery.browser.opera) 8//directly using the event callback can be 9 Document.addeventlistener (" Domcontentloaded ", Jquery.ready, false); 10 11//If it is IE and is not embedded in frame 12//You need to constantly check that the document is loaded with the IF (JQuery.browser.msie && Amp window = = top) (function () {Jquery.isready) return;15 try {16//This place is labeled and parsed at the back (1) DOCUMENT.DOCUMENTELEMENT.DOSCR Oll ("left"); catch (Error) {19////This place is labeled and parsed at the back (2) setTimeout (Arguments.callee, 0); return;22}23//And EXE Cute any waiting functions24 jquery.ready (); (); if (JQuery.browser.opera) Document.addeventlistener ("Domcon Tentloaded ", function () {if (Jquery.isready) return;30 for (var i = 0; i < document.styleSheets.length; i++)//Mark ( 3) if (document.stylesheets[i].disabled) {setTimeout (Arguments.callee, 0); return;34}35//and execute aNY waiting Functions36 Jquery.ready (); PNs}, False), if (JQuery.browser.safari) {$ var numstyles;41 (function () {42 if (Jquery.isready) return;43 if (document.readystate! = "Loaded" && document.readystate! = "complete") {//Tag ( 4) setTimeout (Arguments.callee, 0); return;46}47 if (numstyles = = = undefined) Numstyles = JQuery ("style, link[r El=stylesheet] "). length;49 if (document.styleSheets.length! = numstyles) {//Mark (5) setTimeout (Arguments.callee, 0); Wuyi return;52}53//and execute any waiting functions54 jquery.ready (); ();}57 +//A fallback to window.onload, T Hat would always work59 jQuery.event.add (window, "load", jquery.ready);  Tagged (6) 60}61}

1): This is the main measure of the DOM ready under IE, the principle here http://javascript.nwbox.com/IEContentLoaded/, using under IE. when the DOM does not finish parsing, Calling document's Document.documentElement.doScroll ("left") will error this tip to know if the DOM is ready.
(2): SetTimeout (Arguments.callee, 0) This sentence is a delay of 0 seconds call, in fact it will not be called immediately, but would be called as soon as possible, it tells the browser to run the event handle for any current pending events and complete the current state of the document after the update before calling . Arguments.callee is an anonymous function of the outer layer, the caller of the parameter
(3): You may find this place strange, why not work with Mozilla? The reason is that after Opera's domcontentloaded event, its CSS style is not yet fully available, so special handling, is to judge that each CSS tag is not enable.
(4), (5): When the status of Document.readystate in Safari is loaded or complete, the introduction of CSS files has not been resolved, so to determine the number of CSS files
(6): Finally, if the above hack are not supported ... The most secure Load event is used to ensure that the initialization code can be executed. “

The difference between jQuery ready and Window onload