$ (window). Load (function () {}) and $ (document). The difference between ready (function () {})

Source: Internet
Author: User

The following code in JavaScript:
window.onload= function () {//code}
Equivalent to
The Jquery code is as follows:
$ (window). Load (function () {//code});

$ (function () {}) is equivalent to $ (document). Ready (function () {});

$ (function () {}) is $ (document). Shorthand for Ready (function () {})

Timing of execution
window.load--must wait for all content in the Web page to finish loading (including pictures) to execute
$ (window). Load (function () {//code}); --You must wait for all content in the Web page to finish loading (including pictures) to execute

$ (document). Ready ()--after all the DOM structures in the Web page have been drawn and executed, the content that can be associated with the DOM element is not finished loading

Number of writes
window.load--cannot write more than one of the following code incorrectly:
window.onload= function () {alert ("Text1");}; Window.onload = function () {alert ("Text2");}; The result only outputs a second
Note: The onload event of JavaScript can only hold a reference to a function at a time, and he will automatically overwrite the previous function with the last function. Because Window.load is a DOM2-level event, the $ (window). Load (function () {//code}) can be used multiple times, just back and forth, because the DOM3 level event is used.


$ (document). Ready ()--can write multiple of the following code to execute correctly:
$ (document). Ready (function () {alert (' Hello World ');}); $ (document). Ready (function () {alert ("Hello Again");});
Results are output twice

The browser loads the document as an example, and after the page is loaded, the browser adds events to the DOM element via Javascript. In regular Javascript code, the Window.onload method is typically used, whereas in Jquery, the $ (document) method is used. $ (document). The Ready () method is the most important function in the event module, which can greatly improve the speed of the Web application.
In addition, it is important to note that because the event is registered within the (document). Ready () method, as long as the DOM is in place, the associated file for the element may not have been downloaded at this time.
For example, the image-related HTML download is complete, and has been parsed into the DOM tree, but it is possible that the picture has not been loaded, so the height and width of the sample is not necessarily valid at this time. To solve this problem, you can use another method in Jquery about page loading---the load () method.
The Load () method binds a handler function in the OnLoad event of the element.
If the handler is bound to a Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the handler is bound to the element, it is triggered after the element's contents have been loaded.

$ (window). Load (function () {}) and $ (document). The difference between ready (function () {})

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.