The difference between onload and ready

          in LearningJavaScript, it is often usedWindow.onload method, inJQuery, you learned to use the $ (document). Ready () method. actuallyJQueryis a kind of lightweightJavaScript. Both of these events are triggered when the page document is loaded, but there is a difference between the two, in fact, I have been confused in the heart, but always have a clear day of confusion.

Let's talk about the difference between them!

1. Execution time

Window.onload() must wait until all the elements of the page that include the picture have been loaded before they can be executed.

$ (document). Ready () is executed when the DOM structure is drawn and does not have to wait for the load to complete. That is, $ (document). Ready() is executed before Window.onload() .

2. Different writing numbers

Window.onload() cannot write multiple at the same time, if there are multiple window.onload() methods, only one

$ (document). Ready () can be written multiple at the same time and can be executed

3. Simplified notation

Window.onload() No simplified notation

$ (document). Ready (function () {}) can be simply written as $ (function () {});

in regular JavaScript code, the Window.onload() method is typically used, whereas in jquery, the $ (document) method is used.

$ (document). The Ready () method and the Window.onload () method have similar functionality, but there is a difference in the timing of execution. The Window.onload () method is executed when all elements in the Web page (including the associated file of the element) are fully loaded into the browser, that is, JavaScript can now access any element in the Web page. The event handlers registered through the $ (document) method in jquery can be called when the DOM is fully ready. At this point, all the elements of the Web page are accessible to jquery, but that does not mean that the files associated with these elements have been downloaded.

Example: 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.

The most common example is some pictures of the site, and sometimes you will see that some sites are all pictures have a placeholder, before the page load well before the picture has occupied a certain space, and then each of the respective loading, this form is used $ (document). Ready () method . Some pages are to wait for all the pictures are loaded before the page, when the network is not good when a page needs to wait a long time to display, this is the use of the window.onload() method. Obviously, parsing a Web page into a DOM tree is much faster than loading all the associated files in a Web page.

It is also 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 case properties such as this is not necessarily valid. To solve this problem, you can use another method of--load () in jquery about page loading. 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.

Summarize:

The two methods, originally thought to be roughly the same, had so many differences that the speed of loading was obvious. So, do not be too self-righteous in learning, or everything must be clear.

The difference between onload and ready