Directory:
- 1ready with load who performs first
- Steps for 2DOM Document loading
- 3ready Events
- 4load Events
- 5 Summary
Overview: When you work with jquery, you'll be sure to use this before:
12345678 |
//document ready $(document).ready( function (){ ...code... }) //document ready 简写 $( function (){ ...code... }) |
There are times when you write this:
1234 |
//document load $(document).load( function (){ ...code... }) |
One is the ready one is load, what is the difference between these two? Let's have a chat today. Ready and load who performs first: In the course of an interview, you are often asked a question: Do you want to execute the first one after the load? The answer is ready to execute before load. Steps for DOM document loading: To understand why ready is executed first, the load post-execution process starts by talking about the DOM document loading steps:
123456 |
(1) 解析HTML结构。 (2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。 //ready (5) 加载图片等外部文件。 (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. Ready event: A 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. 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. Summary: I believe you have learned the difference between ready and load, in fact, if the page is not a picture of media files such as 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