JQuery's ready method

  • 2020-03-30 04:25:22
  • OfStack

The ready method in jQuery implements the effect that is not executed until the page is loaded. However, it is not a package of window.onload or doument. Onload


DOMContentLoaded = function()
 {
         //Cancels the event listener, executes the ready method & NBSP;       If (document. AddEventListener) < br / >     {     
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        jQuery.ready();
    }
     else if ( document.readyState === "complete" ) 
    {
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        jQuery.ready();
    }
};


jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {
        readyList = jQuery.Deferred();
            //To indicate that the page has been loaded, the ready method & NBSP; is called directly.               If (document.readystate === "complete") {& fulfill; < br / >             //Press jQuery. Ready into the asynchronous message queue and set the delay time to 1 millisecond (note that some browser delays cannot be less than 4 milliseconds) & NBSP;                       SetTimeout (jQuery. Ready);   < br / >         } 
        else if ( document.addEventListener ) //         {
             //Listen to the DOM load complete & NBSP;                       Document. The addEventListener (" DOMContentLoaded "DOMContentLoaded, false); < br / >              // This is to make sure that everything ready Execution ends if DOMContentLoaded If the method is executed, there will be a state value isReady Is set to true, As a result,               //ready Once the method is executed, it is executed only once, window.addEventListener In the ready Will be return interrupt              window.addEventListener( "load", jQuery.ready, false );
        } else {
            //A lower version of Internet explorer & cake;                       Document. The attachEvent (" onreadystatechange, "DOMContentLoaded); < br / >             window.attachEvent( "onload", jQuery.ready );
            var top = false;
            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}
            if ( top && top.doScroll )  //Remove the iframe component & NBSP;                       {< br / >                 (function doScrollCheck() {
                    if ( !jQuery.isReady ) {
                        try {
                            //According to the bug is compatible with low version of the IE < a href = "http://javascript.nwbox.com/IEContentLoaded/" > http://javascript.nwbox.com/IEContentLoaded/ < / a >                                                         Top. DoScroll (" left "); < br / >                         } catch(e) {
                            //Due to the low version of Internet explorer, the onreadystatechange event is not reliable, so you need to determine whether the page is loaded or not based on various bugs.                                                       Return setTimeout(doScrollCheck, 50);   < br / >                         }
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};


ready: function( wait )
 {
 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
  //Determines whether the page has finished 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");
 }
},

Conclusion:

  There are two kinds of events when a page is loaded. One is ready, which means that the document structure has been loaded (not including pictures and other non-text media files), and the other is onload, which means that all elements of the page including pictures and other files are loaded. (you can say: ready before onload!!)
General style control, such as image size control in the onload;
JS event trigger method, which can be loaded in ready;


Related articles: