Differences between ready and load events in jQuery

Differences between ready and load events in jQuery

The reason why I reprinted this article is that I wrote the article in workshop two days ago.

The previous section describes the ready events defined by jQuery and the default load events of JavaScript. Next we will compare the differences between the two events. To understand the similarities and differences between the two events, you should first understand the loading sequence of HTML documents.

DOM file loading is performed in sequence, which is related to the rendering method of the browser. Generally, the order of browser rendering operations is roughly as follows.

(1) parse the HTML structure.

(2) Load External scripts and style sheet files.

(3) Parse and execute the script code.

(4) construct the html dom model.

(5) Load External files such as images.

(6) the page has been loaded.

The details are as follows.

1. execution time

The load event will not be executed until all content on the webpage is loaded. If a page contains a large number of multimedia files, this situation occurs: The webpage file has been displayed, but because the webpage data has not been fully loaded, the load event cannot be triggered immediately.

Developers are used to placing all the page initialization scripts in the load event processing function. Because the page data is not fully loaded, the webpage document rendering and script Initialization Configuration cannot be synchronized, this affects the availability of the page.

The ready event of jQuery is executed after the DOM structure is drawn, that is, it is executed before the external file is loaded, this ensures that the rendering of Web documents and script initialization settings are synchronized.

In short, ready events are activated prior to load events. If external files are not loaded in the webpage documents, their response times are basically the same.

[Source: http://book.51cto.com/art/201012/236487.htm]