Differences between jquery $ (document). ready () and window. onload _ jquery

$ (Document). ready () in Jquery is similar to the window. onload method in traditional JavaScript, but it is different from the window. onload method. 1. execution time

Window. onload can only be executed after all elements including images in the page are loaded.
$ (Document). ready () is executed after the DOM structure is drawn. You do not have to wait until the loading is complete.

2. different numbers of codes

Window. onload cannot be written at the same time. If there are multiple window. onload methods, only one
$ (Document). ready () can be compiled at the same time, and can all be executed.

3. Simplified writing

Window. onload is not simplified
$ (Document). ready (function () {}) can be abbreviated to $ (function (){});

In my previous development, javascript is generally used. I use the jquery mode, that is, most of the time, the first line is written as follows:

The Code is as follows:

$ (Document). ready (function (){
...
});

At this time, you may not have to wait until all js and image loads are completed, but sometimes you have to wait for all

When all elements are loaded, some methods can be executed. For example, some images or other aspects have not been loaded. At this time, clicking some buttons will lead to unexpected situations, at this time

Use:

The Code is as follows:

$ (Window). load (function (){
$ ("# Btn-upload"). click (function () {// For example:
UploadPhotos ();
});
});

Below is the reprinted content,
Several reasons for using $ (window). load (function () {...}) instead of body. onload ()
First, they are all executed after all the elements of the page (including html tags and all referenced images, Flash and other media) are loaded. This is what they have in common.

No body. Onload () Reason 1:

If we want to load multiple functions at the same time, we must write

It looks ugly. If you use $ (window). load (), we can load multiple functions in this way.

The Code is as follows:

$ (Window). load (function (){
Alert ("hello, I'm jQuery! ");
});
$ (Window). load (function (){
Alert ("hello, I am also jQuery ");
});

In this way, the two functions will be executed from the top down, and it looks much more beautiful.

No body. Onload () Reason 2:

Using body. Onload () cannot completely separate JavaScript and html, which is a serious problem.

In addition, use $ (window ). load (function (){...}) and body. onload () has the same problem, because at the beginning, they also need to wait until all the content on the page

Load is completed before execution, but when the network speed is relatively slow, loading a page usually takes a long time (several seconds to dozens of seconds, or even longer ...), so we often

When the page is not fully loaded and the user is already operating on the page, the page shows different effects as we expected,

So here I recommend $ (document ). ready (function () {}), or $ (function () {}), because it will be executed after the dom element of the page is loaded,

You do not need to wait until the image or other media has been downloaded.

However, sometimes we need to wait until all the things on the page are loaded before executing the function we want to execute, so we should use $ (window ). load (function (){...}) or

$ (Function () {}) usually needs to be selected based on specific needs.

Finally, the jQuery code executed before all DOM elements are loaded is attached.

The Code is as follows: