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

The 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

The usual way to start scripting is when you use JQ:

$ (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;
That is, when the page is loaded, it is bound and triggered when the trigger is true.
In fact, this is the abbreviation for JQ Ready (), which is equivalent to:

$ (document). Ready (function() {     //Dosomething})// or the following method, the default parameter for Jquer is: "Document" ; $ (). Ready (function//dosomething})         

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() {      //Dosomething}// or a frequently used picture document.getElementById (" Imgid "). onload=function//dosomething}         

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.

Finally, we enclose a section of jquery code that executes before all DOM elements are loaded.

<script type= "Text/javascript" >(function() {            alert ("Dom hasn't loaded yet!") );        }) (jQuery) </script>   

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