Detailed description of jQuery's ready method _ jquery

This article mainly introduces how to use jQuery's ready method. This method is used to achieve the effect that can be executed only after loading is complete. For more information, see. The ready method in jQuery implements the effect that is executed only after the page is loaded, but it is not a window. onload or doucment. the onload encapsulation is completed by hiding api and IE browser defects using the standard W3C browser DOM. First, let's look at jQuery's code.

The Code is as follows:

DOMContentLoaded = function ()
{
// Cancel event listening and execute the ready method if (document. addEventListener)
{
Document. removeEventListener ("DOMContentLoaded", DOMContentLoaded, false );
JQuery. ready ();
}
Else if (document. readyState = "complete ")
{
Document. detachEvent ("onreadystatechange", DOMContentLoaded );
JQuery. ready ();
}
};

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 if (document. readyState = "complete "){
// Press jQuery. ready into the asynchronous message queue and set the delay time to 1 Millisecond (note that the latency of Some browsers cannot be less than 4 milliseconds) setTimeout (jQuery. ready );
}
Else if (document. addEventListener )//{
// Listen to the DOM to load the file. addEventListener ("DOMContentLoaded", DOMContentLoaded, false );
// This is to ensure that all ready operations are completed. If the DOMContentLoaded method is executed, an isReady state value is set to true. Therefore, once the // ready method is executed, then it will be executed only once, window. ready in addEventListener will be interrupted by return window. addEventListener ("load", jQuery. ready, false );
} Else {
// Earlier versions of Internet Explorer document. attachEvent ("onreadystatechange", DOMContentLoaded );
Window. attachEvent ("onload", jQuery. ready );
Var top = false;
Try {
Top = window. frameElement = null & document.doc umentElement;
} Catch (e ){}
If (top & top. doScroll) // remove the iframe component {
(Function doScrollCheck (){
If (! JQuery. isReady ){
Try {
// Compatible with earlier versions of IE http://javascript.nwbox.com/IEContentLoaded/ top. doScroll ("left") based on bugs ");
} Catch (e ){
// The onreadystatechange event is unreliable for earlier IE browsers. Therefore, you need to determine whether the page has been loaded based on various bugs. return setTimeout (doScrollCheck, 50 );
}
JQuery. ready ();
}
})();
}
}
}
Return readyList. promise (obj );
};

The Code is as follows:

Ready: function (wait)
{
If (wait === true? -- JQuery. readyWait: jQuery. isReady ){
// Determine whether the page has been loaded 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 types of page loading events: ready, indicating that the file structure has been loaded (excluding non-text media files such as images), and onload, indicates that all elements, including images, are loaded. (You can say: ready loads before onload !!!)
Generally, the style is controlled, and the slice size is controlled to be loaded in onload;
The jS event trigger method can be loaded in ready;