An analysis of the implementation mechanism of jquery's Ready event

In page initialization, more than $ (document) is used. Ready (function () {//code}); or $ (window). Load (function () {//code});

The difference is that ready is triggered after the DOM's structure has been loaded, load is in the page including DOM structure, CSS,JS, pictures, etc. are loaded and then triggered, obviously ready is more suitable for use as a page initialization. But sometimes it doesn't. Further review of its internal mechanisms is required.

So how does the inside of ready determine how the DOM structure is loaded? And what are the judgments of different browsers?

The answer is within the jquery code, assuming that the jquery version is jquery-1.11.3.js.

Ready's key code (3507~3566 line), the key code is marked in red:

JQuery.ready.promise =function(obj) {if( !readylist) {Readylist=jquery.deferred (); //Catch cases where $ (document). Ready () was called after the browser event had already occurred.        //we once tried to use readyState ' interactive ' here, but it caused issues like the one        //discovered by Chriss here:http://bugs.jquery.com/ticket/12282#comment:15        if(Document.readystate = = = "complete" ) {            //Handle It asynchronously to allow scripts the opportunity-to-delay readysetTimeout (Jquery.ready); //standards-based browsers support domcontentloaded}Else if(document.addeventlistener) {//Use the handy event callback            Document.addeventlistener ("domcontentloaded", completed, false); //A fallback to window.onload.            Window.addeventlistener ("Load", completed, false); //If IE event model is used}Else {            //ensure firing before onload, maybe late but safe also for IFRAMEsDocument.attachevent ("onReadyStateChange", completed); //A fallback to window.onload.Window.attachevent ("onload", completed); //If IE and not a frame            //continually check to see if the document was ready            vartop =false; Try{ Top = Window.frameelement = = NULL && document.documentelement; } Catch(e) {}if(Top &&top.doscroll) {(functionDoscrollcheck () {if( !jquery.isready) {Try {                            //Use the trick by Diego Perini                            //http://javascript.nwbox.com/IEContentLoaded/                            Top.doscroll ("left"); } Catch(e) {return SetTimeout (Doscrollcheck, ); }                        //Detach all DOM ready eventsdetach (); //and execute any waiting functions Jquery.ready ();            }                })(); }        }    }    returnreadylist.promise (obj);};

The above code can be split into two parts when ready is triggered

1. Trigger under standard browser

When the browser is based on a standard browser, the "domcontentloaded" event is triggered after the DOM structure is loaded, and jquery internally uses this event as the trigger source for ready.

false );

Trigger under 2.IE Browser

When the browser is IE browser, because IE browser (egg pain and strong) does not support "domcontentloaded" event, so can only seek another method,

(functionDoscrollcheck () {if( !jquery.isready) {Try {                            //Use the trick by Diego Perini                            //http://javascript.nwbox.com/IEContentLoaded/                            Top.doscroll ("left"); } Catch(e) {return SetTimeout (Doscrollcheck, ); }                        //Detach all DOM ready eventsdetach (); //and execute any waiting functions Jquery.ready (); }                })();

ie, the practice is the code above the red word, with " Document.documentElement.doScroll ("left") "method to scroll the page, if not loaded after waiting for 50 milliseconds to continue to roll, until the roll moved to trigger ready.

However, if there is a frame in the page, the Window.onload event is used as the trigger source for ready.

So in IE, when there is a frame in the page, ready is also waiting until all content in the page is loaded and then triggered.

An analysis of the implementation mechanism of jquery's Ready event