Differences between onload and jquery ready () in Javascript knowledge points

Source: Internet
Author: User

In most cases, writing jquery code requires us to put jquery code in

$ (Document). Ready (function (){

...... Jquery code ...........

});

The above code and

$ (). Ready (function (){
...... Jquery code ...........
});

$ (Function (){
...... Jquery code ...........
});

Is equivalent.

Note:Sometimes the jquery code we write ourselves has some inexplicable problems. It seems like a normal code, but it is an error while running, check whether your code is saved in $ (document ). ready () method.

Next let's talk about the differences between the $ (document). Ready () method and the window. onload method:
Their main differences are as follows:

  1. Execution time
    The window. onload method is executed only after all elements (including all associated files of elements) in the webpage are fully loaded into the browser. In jquery, $ (document ). the event handler registered by the ready () method can be called as long as the Dom is fully ready. For example, if the label of an image is complete, you do not need to wait until the image is loaded, you can set attributes or styles of an image.
  2. $ (Document ). the ready () method can be used multiple times to register different event handlers, while the window. onload can only store reference to one function at a time. Multiple binding functions only overwrite the previous functions.
    First, let's take a look at the results of the window. onload method registering twice on a page:
Function one (){
Alert ("one ");
}
Function two (){
Alert ("two ");
}
Window. onload = two;
Window. onload = one; after the above Code is run, "one" will pop up ". Let's take a look at the results of the $ (document). Ready () method called twice.
Function one (){
Alert ("one ");
}
Function two (){
Alert ("two ");
}
$ (Document). Ready (function (){
One ();
});
$ (Document). Ready (function (){
Two ();
});
After the above Code is run, "one" and "two" will pop up respectively ".
Note:

Recently, when I changed a page embedded in the frame, jquery was used for the effect, and the page itself was bound with the onload event. After the change, the test in Firefox is normal and smooth. in IE, it takes more than a dozen seconds for jquery to show up, and daylily is getting cooler.

At first, we thought it was a conflict with the onload loading method. $ (Document) is widely used on the Internet ). ready () is executed after the DOM parsing of the page is complete, while the onload event is executed after all resources are ready, that is, $ (document ). ready () is executed before onload, especially when the page image is large, the time difference may be greater. However, this page clearly shows that the images have been displayed for more than a dozen seconds, and jquery's effect is not displayed yet.

Try to delete the onload loading method. The result is the same. It seems that there is no need to bind the original onload event to $ (document). Ready () for writing. What makes Firefox normal and IE can do that? After debugging, we found that the original onload method bound to IE exceeded $ (document ). ready (), while Firefox executes $ (document) first ). ready (), and then execute the original onload method. This is not exactly the same as the online statement.

Go through the jquery source code and see how $ (document). Ready () is implemented:

If (jquery. browser. MSIE & window = Top) (function (){
If (jquery. isready) return;
Try {
Document.doc umentelement. doscroll ("Left ");
} Catch (error ){
SetTimeout (arguments. callee, 0 );
Return;
}
// And execute any waiting Functions
Jquery. Ready ();
})();
......
Jquery. event. Add (window, "LOAD", jquery. Ready );
The result is clear. ie runs $ (document) first only when the page is not embedded with frame, like Firefox ). ready (), and then execute the original onload method. For pages embedded in the frame, it is only bound to the load event for execution. Therefore, it is only after the execution of the original onload binding method. The page shows that there is an inaccessible resource in the test environment, and the latency of over 10 seconds is the time difference it zoomed in.
Thanks: http://www.skygq.com/2011/02/07/jquery-document-ready-and-windo-onload/http://www.cnblogs.com/joycel/archive/2010/05/26/1744194.html

Related Article

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.