The Ready method of jquery is detailed _jquery

Source: Internet
Author: User
Tags message queue

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;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.