JavaScript:onload is different fromready

When learning JavaScript, you often use the window.onload method, and in jQuery, you learn to use the $(document.ready() method. I n fact, jQuery is a lightweight JavaScript. Both events are triggered when the page document is loaded, but there is a difference between the two, in fact, I have been confused, but confusion always have a clear day.

Let's talk about the differences between them!

1. Time of performance

window.onload ( ) must wait until all elements of the page, including the picture, have finished loading before they can be fulfilled.

$(document.ready) is performed after the DOM structure is drawn, and there is no need to wait until the end of loading. That is, $(document.ready) is performed before windows.onload().

2. Write a different number

Window.onload cannot write more than one at a time, and if there are multiple window.onload() methods, only one is performed

$document.ready can be written multiple at the same time and can be performed

3. Simplify writing

window.onload ( ) does not simplify writing

$(document.ready) can be abbrewed to $(function)

In regular JavaScript code, the window.onload () method is typically used, while in jQuery, the $(document.ready) method is used.

The $(document.ready) method and the window.onload () method have similar functionality, but there is a difference in the timing of performance. T he window.onload method is performed only after all elements in the page, including the associated files of the elements, are fully loaded into the reader, i.e. JavaScript can access any element in the page at this time. E vent handlers registered with the $.ready() method in jQuery can be called when the DOM is fully ready. At this point, all elements of the page are accessible to jQuery, but that doesn't really mean that the files associated with those elements are downloaded.

Example: The load method binds a handler in the onload event of an element. If the handler is bound to a window object, it fires when everything, including windows, frames, objects, images, and so on, is loaded, and if the handler is bound to an element, it fires when the contents of the element are loaded.

The most common example is some picture sites, sometimes you will see that some sites are all pictures have a placeholder, before the page loaded a certain amount of space, and then each of their own loading, this situation is using the $.ready () method. S ome pages are to wait for all the pictures to load before displaying the page, when the speed of the Internet is not good when a page needs to wait a long time to show, this is the use of window.onload ( ) method. Obviously, parsing a web page into a DOM tree is much faster than loading all the associated files in the page.

It is also important to note that because events registered within the document.ready() method are performed as soon as the DOM is ready, it is possible that the associated file for the element is not downloaded at this time. F or example, html downloads related to pictures end and have been resolved to the DOM tree, but there is a good chance that the picture has not finished loading, so properties such as the height and width of the picture are not necessarily valid at this time. T o solve this problem, you can use another method in JQuery about page loading, the load() method. T he load() method binds a handler to the onload event of the element. If the handler is bound to a window object, it fires when everything, including windows, frames, objects, images, and so on, is loaded, and if the handler is bound to an element, it fires when the contents of the element are loaded.

summary:

The two methods that were supposed to be roughly the same, with so many differences, are obvious in terms of loading speed. So don't be too self-righteous in your studies, or you'll have to figure everything out.