Which one is executed first, ready or load? What is the difference between ready and load events in jquery?

Which one executes first, ready or load? I believe that many friends who have just come into contact with jquery will have such questions. This chapter will introduce to you who is executed first, ready or load? The difference between ready and load events in jquery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Which one executes first, ready or load:

During the interview process, we are often asked a question: which one executes first, ready or load? , which one is executed after? The answer is that ready is executed first and load is executed later.

The steps for loading a DOM document:

To understand why ready is executed first and then load is executed, you must understand the steps for loading a DOM document:

(1) Parse the HTML structure .

(2) Load external scripts and style sheet files.

(3) Parse and execute script code.

(4) Construct HTML DOM model. //ready

(5) Load external files such as images.

(6) The page is loaded. //load

It can be understood from the execution steps of a document that ready starts execution after [step 4] is completed, while load starts execution after [step 6] is completed

ready event:

The ready event is executed after the DOM structure is drawn. This ensures that even if a large number of media files are not loaded, the JS code can still be executed.

load event: The

load event must wait until all content in the web page is loaded before it is executed. If there are a large number of images in a web page, this situation will occur: the web page document has been rendered, but because the web page data has not been completely loaded, the load event cannot be triggered immediately.

Summary:

I believe everyone already understands the difference between ready and load. In fact, if there are no media files such as pictures in the page, ready and load are almost the same, but there are files in the page. It's different, so I still recommend everyone to use ready at work.

The above is how to layout the flexbox flexible box? Full introduction to the detailed tutorial, if you want to know more about jQuery, please pay attention to the PHP Chinese website.

The above is the detailed content of Which one is executed first, ready or load? What is the difference between ready and load events in jquery?. For more information, please follow other related articles on the PHP Chinese website!