Ready and load events in jquery

jquery has 3 ways to load documents

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

One is the ready one is load, what is the difference between these two?

Ready and load who performed 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.

Steps for DOM document loading:
To understand why ready is executed first, the load post-execution needs to understand the next steps of DOM document loading:

(1) parsing the HTML structure. (2) Loading external scripts and style sheet files. (3) Parse and execute script code. (4) Constructs an HTML DOM model. Ready (5) Loads external files such as pictures. (6) The page has finished loading. Load

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

Conclusion:

The difference between ready and load is that the resource file is loaded, ready constructs the basic DOM structure, so the faster the code should load the better. In an era of high-speed browsing, no one is willing to wait for answers. If a site page load more than 4 seconds, I'm sorry, you 1/4 users will face the loss, so for the framework of the user experience is crucial, we should deal with the DOM the better, we do not have to wait until the image resources are loaded before processing the frame loading, Too many picture resources the load event will not be triggered.

Ready and load events in jquery