$.ready and onload differences

1. The method of JQ ready () is DOM ready

His role or meaning is that the DOM can be manipulated after the DOM has been loaded.

In general, the first page response load 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.getelementbyidx_x ("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 a uniform picture of multiple specifications we can directly on the price width or height of the property < IMG src= "img.jpg" alt= "big photos of" the pier "width=" "height=", such as (recommended) or can be added to the CSS style width or height of the properties. 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 it's a performance issue with CSS expressions

$.ready and onload differences