Window.onload and $ (document). The difference between ready ()

First of all, the concept of the two are clear: in fact, from the name can be very good distinction

(1) The BOM object of the Window object JavaScript (which represents the browser window, in white, the page you are currently visiting), so window.onload represents the current browser window (including all the resources on the current HTML page: Dom tree, picture, etc.) After the loading is completed, the next step is to execute the JS code;

(2) The Document object is a JavaScript DOM object (which represents the documentation object model, in white words, the entire DOM tree structure of the page you are currently accessing), so $ (document). Ready () This means that after the DOM tree is loaded on the current HTML page, the JS code inside is then executed.

<script type= "Text/javascript" >    //JavaScript Source JS code entry function notation     () {        alert (1);    }     // jquery's JS code entry function (the $ symbol actually represents the jquery object, which is understood to be an alias    for the jquery object, // like we call the $.post (), $.ajax () ... Such methods are actually methods of jquery objects)    $ (document). Ready (function() {        alert (2);    }) </script>

So the above two which one executes first, it is self-evident. Although alert (2) is written behind alert (1), the completion of the DOM tree loading must be done before the entire page is loaded.

Here are a few details about the difference between the two when you interview

(1) Different timing of execution

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.

(2) can be written in different 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 the end, we'll talk about a situation that you might encounter when we use $ (document) in the page. Ready (function () {}), when the page Dom tree is loaded, the code in the function is executed, and most of the time, in general, there is no problem.

But if there are times when you have to wait for all the elements to be loaded before you can execute some of the methods, for example, some pictures or something else is not loaded, this time, clicking on certain buttons will cause the page to appear some unexpected

case, the Load method should solve the problem, but there are no examples to be added later.

Window.onload and $ (document). The difference between ready ()