The difference between ready and load

There are ready and load events in jquery

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

Their main difference is that ready is executed before load executes.

Steps for 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.

An example:

Document.addeventlistener ("domcontentloaded", function () {    console.log (' domcontentloaded callback ')}, False); Window.addeventlistener ("Load", function () {    console.log (' Load event callback ')}, False); Console.log (' normal method one ')//test Load $ ( function () {    console.log (' jquery Ready ')}) Console.log (' normal method two ')

The order of execution is:

Common method One common method two jquery readydomcontentloaded callback Load event callback

　　

　　

　　

　　

The difference between ready and load