Detailed explanation of jQuery's ready method_jquery

The ready method in jQuery achieves the effect of being executed only after the page is loaded. However, it is not a package of window.onload or document.onload. Instead, it uses the standard W3C browser DOM to hide the API and IE browser defects. Completed, first, let’s look at the jQuery code

Copy code The code is as follows:

DOMContentLoaded = function()
{
//Cancel event monitoring and execute ready method if (document.addEventListener)
{                                                 document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
         jQuery.ready();
}
        else if (document.readyState === "complete") 
{
         document.detachEvent( "onreadystatechange", DOMContentLoaded );
         jQuery.ready();
}
};

Copy code The code is as follows:

jQuery.ready.promise = function( obj ) {
If ( !readyList ) {
          readyList = jQuery.Deferred();
//Indicates that the page has been loaded, call the ready method directly if (document.readyState === "complete") {
                                                                                                                                                                                                                                                                                                                                                  else if (document.addEventListener) //                                                                                                                                                                                                                                                                                                                                                                          //This is to ensure that all ready executions are completed. If the DOMContentLoaded method is executed, there will be a status value isReady set to true. Therefore, //Once the ready method is executed, it will only be executed once, and the ready in window.addEventListener will be Interrupted by return window.addEventListener( "load", jQuery.ready, false );
         } else {
                                                                                                                                        use using   use using using   to use   to use               through using ’’ s ’ through ’ s ’ through using ’ through ’ s ’ through using ’ through ’ s ’ through ’ through ’ s ’ through ’ through to ‐ to ‐‐‐‐‐‐‐ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​                 window.attachEvent( "onload", jQuery.ready );
            var top = false;
               try {
                          top = window.frameElement == null && document.documentElement;
                } catch(e) {}
If ( top && top.doScroll ) // Remove iframe components (function doScrollCheck() {
If ( !jQuery.isReady ) {
Try {
//Compatible with lower versions of IE based on bugs
http://javascript.nwbox.com/IEContentLoaded/
                                                                                                                                                                                                                                                       } catch(e) {                                    // Due to the low version of the IE browser, the OnreadyStateChange incident is unreliable, so you need to determine whether the page has been loaded according to each BUG to complete the Return Settimeout (DOSCROLLLCHECK, 50);
                                                                                                        jQuery.ready();
                                                                                                                                                                                                })();
               }
          }
}
Return readyList.promise( obj );
};

Copy code The code is as follows:

ready: function( wait )
{
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
//Determine whether the page has completed loading and whether the ready method has been executed
Return;
}
if ( !document.body ) {
Return setTimeout( jQuery.ready );
}
jQuery.isReady = true; //Indicates that the ready method has been executed
if ( wait !== true && --jQuery.readyWait > 0 ) {
Return;
}
readyList.resolveWith( document, [ jQuery ] );
if (jQuery.fn.trigger) {
jQuery(document).trigger("ready").off("ready");
}
},

Summary:

There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as images). The other is onload, which indicates that all elements of the page including images and other files have been loaded. . (It can be said: ready is loaded before onload!!!)
General style control, such as image size control, is loaded in onload;
The method triggered by jS event can be loaded in ready;