jquery ready function source code research_jquery

Under normal circumstances, the onload of the body tag is set to listen to the load event of the window. However, the load event is not triggered until all elements of the page are loaded. If there are many pictures on the page or the pictures are too large, the initialization code will not be executed. When executed, the user has performed other operations. The Jquery library provides a very convenient and easy-to-use function ($(selector).ready()), which allows us to perform corresponding operations after the DOM of the page is loaded. (Of course, this depends on the support of the user's browser). Instead of waiting for all 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 us study the implementation of this function.
Principle:
When the jquery script is loaded, an isReady tag will be set to listen for the DOMContentLoaded event (this is not common in all browsers, and jquery operates differently in different browsers). Of course, when the ready function is called, if isReady Not set, which means that the page has not been loaded, and the functions to be executed will be cached in an array. When the page is loaded, the cached functions will be executed one by one.
Detailed code analysis in Jquery :

Copy code The code is as follows:

ready: function(fn ) {
// Bind listener
bindReady();
// If the DOM is loaded
if (jQuery.isReady)
// Run this function immediately
                        fn. call (document, jquery);
// Otherwise,
Else
// Add the function to the cache array
jquery.readylist.push (function () {RETURN FN.Call (this, this, this, this, this, this, this, jQuery); } );
                                                                     return this; >

Copy code

The code is as follows:

var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true;

// Mozilla, opera, webkitnightlies support DOMContentLoaded Event
if ( document.addEventListener && !jQuery.browser.opera)
// Just use the event callback directly
document.addEventListener( "DOMContentLoaded", jQuery.ready, false );

// If it is IE and not embedded in a frame
// You need to constantly check whether the document is loaded
if ( jQuery.browser.msie && window == top ) (function(){
                                                                       if (jQuery. error ) {
//// Mark this place and parse it later (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 ) // Marker (3)
if (document.styleSheets[i].disabled) {
                                                                                                                                                                   . jQuery.ready();
}, false);

if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document. readyState != " loaded" && document.readyState != "complete" ) { // Mark(4)
                                                                        numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { // Marker (5)
setTimeout( arguments. callee, 0 );
                            return; 🎜> }

// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready ); // Marker (6)
}
}



(1): This is mainly to measure the dom ready under IE. The principle is here http://javascript.nwbox.com/IEContentLoaded/, which can be used under IE. When the DOM has not completed parsing, call Document's document.documentElement.doScroll("left") will go wrong. This little trick can help you know whether the dom is ready.
(2):setTimeout(arguments.callee, 0) means delaying the call for 0 seconds. , in fact it will not be called immediately, but will be called as quickly as possible. It tells the browser to run the event handler for any currently pending events and complete the update of the current state of the document before calling it. Arguments.callee is It is an outer anonymous function, the caller of the parameter
(3): You may feel strange about this, why not handle it with mozilla? The reason is that after opera's DOMContentLoaded event occurs, its css style is not fully available yet , so special processing is required to determine whether each CSS tag is enabled.
(4), (5): When the status of document.readyState in Safari is loaded or complete, the CSS file has not been introduced yet. Determine whether it has been parsed, so you need to judge the number of css files
(6): Finally, if the above hacks are not supported...use the safest load event to ensure that the initialization code can be executed.