JQuery ready and Window.onload usage understanding

Recently done a project, in the previous article has written a plugin: jquery rolling fixed plug-ins, the beginning of the local test, found that there is no problem, and then set up to the server, found floating at the end of the position is always wrong, always think that is what code conflicts or Plug-ins are not perfect, and then opened the debugging. The height of the bottom bottom parameter was found to be changing with the browser refresh. The elements are fixed there. Didn't think it was the reason for jquery.

As an example of a browser loading a document, when the page is loaded, the browser adds events to the DOM element through JavaScript, usually using the Window.onload method in regular JavaScript code, and in jquery, using $ (document). Ready () method. Because events registered within the $ (document). Ready () method are executed as long as the DOM is ready, the associated file of the element may not be downloaded at this time. For example, a picture-related HTML download is complete, and has been resolved to the DOM tree, but it is very likely that the picture has not been loaded, the height and width of the picture is not necessarily valid. To solve this problem, you can use another method of page loading in jquery---the Load () method. The Load () method binds a handler function in the OnLoad event of the element.

If the handle function is bound to the Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the processing function is bound to the element, it is triggered after the element's contents have been loaded.

The difference between jquery ready and window.onload is given below

twice

	Window.load	$ (document). Ready ()
Execution time	must wait for all After the content is loaded (including the picture) to perform the
number of writes	cannot write multiple The following code does not execute correctly: window.onload = function () {    alert ( "Caibaojian"); }; window.onload = function () {    alert ("caibaojian.com"); }; Results Output only the second	can write multiple at the same time the following code is correct Execution: $ (document). Ready (function () {    alert ("Hello Caibaojian"); }); $ (document). Ready (function () {    alert ("Hello caibaojian.com"); }); Results Output
Simplified wording	No	$ (function () { Do something });

The jquery code is as follows:

When the jquery script is loaded, a isready tag is set to listen for the domcontentloaded event (this is not what browsers have, different browsers, and jquery works differently). Of course, when it comes to calling the Ready function, If the IsReady is not set, that is to say that the page is not finished loading, will be executed by an array of functions cached, when the page loaded, then the cached function one by one execution.
Detailed code analysis in jquery:

The code is as follows	Copy Code
Ready:function (FN) { Binding listeners Bindready (); If the DOM load completes if (Jquery.isready) Run this function now Fn.call (document, JQuery); or save it. Else To add a function to the cached array JQuery.readyList.push (function () {return Fn.call (this, jQuery);}); return this; }

Let's take a look at jquery if you implement the notification Bindready () function for different browser DOM loads:

The code is as follows

Copy Code

var readybound = false; function Bindready () { if (Readybound) return; Readybound = true; Mozilla,opera,webkitnightlies Support for domcontentloaded events if (Document.addeventlistener &&!jquery.browser.opera) You can use the event callback directly Document.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 loading if (jQuery.browser.msie && window = top) (function () { if (Jquery.isready) return; try { This place is marked and parsed in the back (1) Document.documentElement.doScroll ("left"); catch (Error) { This place is marked and parsed in the back (2) settimeout (Arguments.callee, 0); Return } and execute any waiting functions Jquery.ready (); })(); if (JQuery.browser.opera) Document.addeventlistener ("domcontentloaded", function () { if (Jquery.isready) return; for (var i = 0; i < document.styleSheets.length i++)//Mark (3) if (document.stylesheets[i].disabled) { settimeout (Arguments.callee, 0); Return } and execute any waiting functions Jquery.ready (); }, False); if (JQuery.browser.safari) { var numstyles; (function () { if (Jquery.isready) return; if (document.readystate!= "loaded" && document.readystate!= "complete") {//Mark (4) settimeout (Arguments.callee, 0); Return } if (numstyles = = undefined) Numstyles = JQuery ("style, Link[rel=stylesheet]"). Length; if (document.styleSheets.length!= numstyles) {//Mark (5) settimeout (Arguments.callee, 0); Return } and execute any waiting functions Jquery.ready (); })(); } A fallback to window.onload, that'll always work JQuery.event.add (window, "load", jquery.ready); Tags (6) } }

1): This is the main measure of IE under the DOM ready, the use of IE. when the DOM does not complete parsing, call the document's Document.documentElement.doScroll ("left") The trick is 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 immediately call, but will be called as soon as possible, it tells the browser to run any pending events at the end of the event handle and completed the current state of the document update before calling . Arguments.callee is the outer anonymous function, and the caller of the parameter
(3): This place you may feel strange, why not in the Mozilla to deal with it? The reason is Opera's domcontentloaded event, its CSS style is not fully available, so to special treatment, is to judge each CSS tag is not enabled.
(4), (5): Safari in the document.readystate status of loaded or complete, CSS file introduction has not been resolved, so to pass the number of CSS files to determine
(6): Finally, if the above hack are not supported ... Use the most insured load event to ensure that you can execute to the initialization code