This article introduces $ (document). ready () and onload usage in jquery, including basic methods such as loading sequence and differences.
There are two types of page loading events: ready, indicating that the file structure has been loaded (excluding non-text media files such as images), and onload, indicates that all elements, including images, are loaded. (You can say: ready loads before onload !!!)
Generally, the style is controlled, and the slice size is controlled to be loaded in onload;
The jS event trigger method can be loaded in ready;
Many people who use jQ write scripts like this:
General statement
| The Code is as follows: | Copy code |
$ (Function (){ |
|
In fact, this is short for jq ready (), which is equivalent:
| The Code is as follows: | Copy code |
$ (Document). ready (function (){ |
|
It is also equal to the following method. The default parameter of jQuer is "document ";
| The Code is as follows: | Copy code |
$ (). Ready (function (){ |
|
$ (Document). Ready () method VS OnLoad event VS $ (window). load () method
The first thing we learned when to get started with JQuery is when to start the event. For a long time, the events triggered after page loading were all loaded into the Onload event of the "Body.
The Onload event of the Body has many drawbacks compared with the Ready method of JQuery. For example:
How to load Multiple Functions
■ <Body onload = "a (); B ();">
</Body>
The Onload event can only be loaded in this way, which is ugly...
■ In JQuery, you can use multiple JQuery. Ready () Methods to execute them in sequence.
Code and content are not separated
This does not seem to have to be said, and it is so annoying -.-!! The sequence of pipeline execution is different.
■ For Body. the Onload event is triggered after all the page content is loaded. I mean all the content, including images and flash. if there is a lot of such content on the page, the user will wait for a long time.
■ For the $ (document). ready () method, this method is triggered only after all the DOM of the page is loaded, which undoubtedly greatly speeds up the webpage.
However, for some special applications, the image can be scaled in or out, and the image can be cropped. What happens after all the content on the webpage is loaded? We recommend that you use the $ (window). load () method. This method will not be triggered until all the content on the page is loaded, and there is no OnLoad event.
| The Code is as follows: | Copy code |
<Script type = "text/javascript"> |
|
The above code is executed sequentially after all the content on the page is loaded.
Of course, do not forget the corresponding Unload Method
| The Code is as follows: | Copy code |
<Script type = "text/javascript"> |
|
The above code will be triggered when the page is closed.
JS Code is triggered before all DOM loads.
This method is my favorite during debugging. Sometimes it is used during development.
| The Code is as follows: | Copy code |
<Body> |
|
Yes, the JavaScript code is embedded into the body in the form of js closures. This code will be automatically executed. Of course, JavaScript code can also be embedded directly. In this way, pay attention to the sequence problem as follows:
| The Code is as follows: | Copy code |
<Body> |
|
Loading Sequence of $ (document). ready () and onload
Go through the jquery source code and see how $ (document). ready () is implemented:
| The Code is as follows: | Copy code |
If (jQuery. browser. msie & window = top) (function (){ |
|
The result is clear. IE runs $ (document) first only when the page is not embedded with frame, like Firefox ). ready (), and then execute the original onload method. For pages embedded in the frame, it is only bound to the load event for execution. Therefore, it is only after the execution of the original onload binding method. The page shows that there is an inaccessible resource in the test environment, and the latency of over 10 seconds is the time difference it zoomed in.
$ (Document). ready () and window. onload
1. execution time
Window. onload can only be executed after all elements including images in the page are loaded.
$ (Document). ready () is executed after the DOM structure is drawn. You do not have to wait until the loading is complete.
2. different numbers of codes
Window. onload cannot be written at the same time. If there are multiple window. onload methods, only one
$ (Document). ready () can be compiled at the same time, and can all be executed.
3. Simplified writing
Window. onload is not simplified
$ (Document). ready (function () {}) can be abbreviated to $ (function (){});
Take a browser to load documents as an example. After the page is loaded, the browser adds an event to the DOM element through Javascript. In general Javascript code, the window. onload method is usually used, while in Jquery, the $ (document). ready () method is used. The $ (document). ready () method is the most important function in the event module and can greatly speed up Web applications.
Window. load $ (document). ready ()
The execution time must wait until all the content on the webpage is loaded (including images) before all DOM structures in the webpage can be executed after being drawn. The content associated with DOM elements is not loaded.
You cannot write multiple
The following code cannot be correctly executed:
| The Code is as follows: | Copy code |
| Window. onload = function (){ Alert ("text1 "); }; Window. onload = function (){ Alert ("text2 "); }; |
|
Only the second result can be output and multiple results can be written at the same time.
Run the following code correctly:
| The Code is as follows: | Copy code |
| $ (Document). ready (function (){ Alert ("Hello World "); }); $ (Document). ready (function (){ Alert ("Hello again "); }); Results are output twice. Simplified syntax $ (function (){ // Do something }); |
|
In addition, pay attention to the fact that in $ (document ). the event registered in the ready () method will be executed as long as the DOM is ready. Therefore, the associated file of the element may not be downloaded. For example, html related to images has been downloaded and parsed as DOM trees, but it is very likely that the images have not been loaded yet, therefore, the attributes such as the height and width of the sample slice are not necessarily valid at this time. To solve this problem, you can use the load () method, another method for page loading in Jquery. The Load () method binds a handler to the onload event of the element. If the processing function is bound to a window object, it is triggered after all the content (including the window, frame, object, and image) is loaded. If the processing function is bound to an element, it is triggered after the element content is loaded.
The Jquery code is as follows:
| The Code is as follows: | Copy code |
| $ (Window). load (function (){ // Write code }); Equivalent to the following code in JavaScript Window. onload = function (){ // Write code } |
|
Recently, when I changed a page embedded in the frame, jquery was used for the effect, and the page itself was bound with the onload event. After the change, the test in Firefox is normal and smooth. in IE, it takes more than a dozen seconds for jquery to show up, and daylily is getting cooler.
At first, we thought it was a conflict with the onload loading method. $ (Document) is widely used on the Internet ). ready () is executed after the DOM parsing of the page is complete, while the onload event is executed after all resources are ready, that is, $ (document ). ready () is executed before onload, especially when the page image is large, the time difference may be greater. However, this page clearly shows that the images have been displayed for more than a dozen seconds, and jquery's effect is not displayed yet.
Try to delete the onload loading method. The result is the same. It seems that there is no need to bind the original onload event to $ (document). ready () for writing. What makes Firefox normal and IE can do that? After debugging, we found that the original onload method bound to IE exceeded $ (document ). ready (), while Firefox executes $ (document) first ). ready (), and then execute the original onload method. This is not exactly the same as the online statement.
Go through the jquery source code and see how $ (document). ready () is implemented:
| The Code is as follows: | Copy code |
| If (jQuery. browser. msie & window = top) (function (){ If (jQuery. isReady) return; Try { Document.doc umentElement. doScroll ("left "); } Catch (error ){ SetTimeout (arguments. callee, 0 ); Return; } // And execute any waiting functions JQuery. ready (); })(); JQuery. event. add (window, "load", jQuery. ready ); |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
