The difference between ready and load events in jquery

1. Abstract

When you use jquery and JS in programming, you'll have to do this before you use it:

Document ready$ (document). Ready (function () {    ...}) Document ready Shorthand $ (function () {    ...})

Sometimes it does:

Document load$ (document). Load (function () {    ...})

One is the ready one is load, what is the difference between these two? Let's have a chat today.

2. Ready and load who performs first:

In the course of the interview, you will often be asked a question: ready and load the first execution, that one after execution? The answer is ready to execute before load.

3. DOM document loading steps:　　

To understand why ready is executed first, the load post-execution should first talk about the DOM document loading steps:

(1) parsing the HTML structure.
(2) Loading external scripts and style sheet files.

(3) Parse and execute script code.

　　(4) 构造HTML DOM模型。//ready

(5) Loading external files such as pictures.

　　(6) 页面加载完毕。//load

As you can see from the above description, ready is executed after step (4) is complete. However, load will not be executed until step (6) is complete.

4. About the Ready event:

The Ready event is painted after the DOM structure has been drawn. This ensures that even if a large number of media files are not loaded, the JS code can be executed as well.

5. About the Load event :

The Load event must wait until all content in the Web page has been loaded before it is executed. If a page has a large number of images, then this happens: The Web document has been rendered, but because the page data is not fully loaded, the Load event can not be triggered immediately.

6. Summary:

I believe you have learned the difference between ready and load, in fact, if the page is not a picture and other media files, ready and load is the same, but the page has a file is not the same, so it is recommended that everyone in the work to be used.

The difference between ready and load events in jquery