The Ready method in jquery implements the effect of when the page is loaded, but he is not a window.onload or doucment.onload package, but rather a standard Web browser DOM hides APIs and IE browser flaws, first of all, Let's see the code for jquery.
Copy Code code as follows:
domcontentloaded = function ()
{
Cancel event sniffing, 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 code as follows:
JQuery.ready.promise = function (obj) {
if (!readylist) {
Readylist = jquery.deferred ();
Indicates that the page has already been loaded and directly calls the Ready method if (document.readystate = = "complete") {
Press Jquery.ready into the asynchronous message queue, setting the latency time of 1 milliseconds (note that some browser latency cannot be less than 4 milliseconds) settimeout (Jquery.ready);
}
else if (Document.addeventlistener)//{
Listens for DOM loading complete document.addeventlistener ("domcontentloaded", domcontentloaded, false);
This is to ensure that all ready execution ends, and that if the Domcontentloaded method executes, there will be a state value IsReady set to True, so that once the//ready method executes, it is executed only once, Window.addeve The ready in Ntlistener will be return interrupted Window.addeventlistener ("Load", Jquery.ready, false);
} else {
Low version of IE browser document.attachevent ("onReadyStateChange", domcontentloaded);
Window.attachevent ("onload", Jquery.ready);
var top = false;
try {
top = Window.frameelement = = null && document.documentelement;
catch (e) {}
if (top && top.doscroll)//Remove the composition of the IFRAME {
(function Doscrollcheck () {
if (!jquery.isready) {
try {
Compatible with the lower version of IE Http://javascript.nwbox.com/IEContentLoaded/top.doScroll ("left") according to the bug;
catch (e) {
Due to the low version of IE browser, the onreadystatechange event is unreliable, so it is necessary to determine whether the page has been loaded and completed return settimeout (DOSCROLLCHEC K, 50);
}
Jquery.ready ();
}
})();
}
}
}
return readylist.promise (obj);
};
Copy Code code as follows:
Ready:function (Wait)
{
if (wait = = true?--jquery.readywait:jquery.isready) {
Determine if 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");
}
},
Summarize:
Page load complete There are two kinds of events, one is ready, that the document structure has been loaded complete (not including pictures and other non-text media files), the second is the onload, indicating that the page contains pictures and other files, such as all the elements are loaded to complete. (can be said: Ready before the onload loading!!! )
General style control, such as picture size control placed in the onload loading;
JS Event Trigger method, can be loaded inside the ready;
