JS page load trigger event difference between Document.ready and onload

JS Page Load trigger event difference between Document.ready and onloadThe difference between Document.ready and onload--javascript document load completion event

There are two kinds of events for page load completion:

One is ready, indicating that the document structure has been loaded (not including pictures and other non-text media files);

The second is onload, which indicates that all elements, including pictures and other files, are loaded and completed.

1. Dom Ready

A lot of people who use JQ have started writing scripts like this:
$ (function () {
Do something
});

For example:

$ (function () {
$ ("a"). Click (function () {
Alert ("Hello world!");
});

})

This example binds a click event to all the a tags. That is, when all links are clicked by the mouse, the alert ("Hello world!") is executed;
(own understanding) that is, the page is loaded when the binding, the real trigger when triggered.
In fact, this is the abbreviation of JQ Ready (), which is equivalent to:
$ (document). Ready (function () {
Do something
})
Or the following method, the default parameter of Jquer is: "Document";
$ (). Ready (function () {
Do something
})
This is the method of JQ ready (), which is the DOM, and his role or meaning is that the DOM can be manipulated after the DOM has been loaded.
In general, a page response loading order is, domain name resolution-loading html-loading JS and css-loading pictures and other information.
Then Dom ready should be able to manipulate the DOM between "Loading JS and css" and "Loading pictures and other information".

2. Dom Load
When using native JS, we usually use the onload time to do something, such as:
Window.onload=function () {
Do something
}
Or a frequently used picture, assuming this
document.getElementById ("Imgid"). Onload=function () {
Do something
}
This is the DOM load, his role or meaning is: After the document is loaded, you can manipulate the DOM, the document includes loading pictures and other information.
Then DOM load is the "loading of pictures and other information" in the order in which the page responds to loading, and the DOM can be manipulated.

3. Use one of the most common examples to illustrate the difference between Dom ready and DOM load
Dom Ready is done in the DOM after the loading of the DOM can be directly manipulated, such as a picture as long as the tag is complete, do not wait for the picture to be loaded, you can set the image of the width of the property or style, etc.;
Dom load is used to manipulate the DOM directly after loading the entire document file (including other information such as loading pictures), such as a picture to be loaded before the image can be set to the width of the property or style, etc.
For example, a picture browsing effect, usually if the picture size is very large, in order to prevent the image to open the page will usually limit the width or height of the picture, if it is a single picture or more than one size of the uniform picture we can directly on the to add a width or height of the property < IMG src= "img.jpg" alt= "big photos of" the pier "width=" "height=", or you can add width or height attributes to CSS styles (recommended). But what if these images are not uniformly sized to be viewed? Then there is a problem, you set the wide height is likely to cause serious distortion of the picture. After the IE6 IE7, IE8 also has other mainstream browsers that support css2.1 Min-width,max-width,min-height,max-width so that we can solve these problems with min-width,max-width,min-height,max-width, but IE 6 unless you are discarding performance issues with CSS expressions (of course old9 (http://old9.blogsome.com/2008/10/26/css-expression-reloaded/) Wating (HTTP/ www.planabc.net/2009/09/21/optimization_of_css_eexpression/) for a solution to the CSS expression performance problem, you can look at it. This time the best solution for IE is to use DOM ready rather than DOM load, because usually the big picture load will be 1.1 points of loading, this in large size, many bytes, slow speed when the performance is very obvious, with the DOM load, usually the first page open, After loading is finished, then the picture is reset wide, the picture load time, the page will be open for how long, the user will be very uncomfortable!!

JS page load trigger event difference between Document.ready and onload