In general, the OnLoad Monitor window's Load event is set for the body tag. However, the load event is triggered when all the elements of the page are loaded, and if there are more pictures on the page or the picture is too large, the user does something else when the initialization code is not executed. The jquery library provides a very handy and useful function ($ (selector). Ready ()), so that we can do it after the DOM of the page is loaded (which, of course, depends on the support of the user's browser). Instead of waiting for all the elements to be loaded. For example:
$ (document). Ready (function () {alert (' use in page Script tag ')});
$ (document). Ready (function () {alert (' Use in Import JS file '});
Now let's look at the implementation of this function.
Principle:
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:
Copy Code code as follows:
Ready:function (FN) {
//Binding Listener
bindready ();
//If DOM loading completes
if (jquery.isready)
//Run this function immediately Br> fn.call (document, JQuery);
//otherwise save
else
//Add functions 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:
Copy Code code as follows:
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 mainly measured under IE dom ready, the principle here http://javascript.nwbox.com/IEContentLoaded/, use in IE. when the DOM does not complete parsing, The call to Document.documentElement.doScroll ("left") of the document will make a mistake. The trick is to know if Dom has any 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.
