Page load complete There are two kinds of events, one is ready, that the document structure has been loaded complete (not including pictures and other non-text media files), the second is the onload, indicating that the page contains pictures and other files, such as all the elements are loaded to complete. (can be said: Ready before the onload loading!!! )
General style control, such as picture size control placed in the onload loading;
JS Event Trigger method, can be loaded inside the ready;
A lot of people with JQ start writing scripts like this:
The usual wording
| The code is as follows | Copy Code |
$ (function () { |
|
In fact this is the shorthand for JQ ready (), which is equivalent to:
| The code is as follows | Copy Code |
$ (document). Ready (function () { |
|
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 you learn about jquery is when you start an event. In the past a long time, the page loading after the events are loaded in the "body" of the onload incident.
For the body of the OnLoad event and jquery ready method, there are many drawbacks. For example:
Problems with loading multiple functions
<body onload= "A (); B ();" >
</body>
In the onload incident can only be loaded in this way, very ugly ...
And in jquery you can take advantage of multiple jquery.ready () methods, which are executed sequentially
Code and content are not separated
This seemingly needless to say, let a person detest-.-!! ◦ Execution sequence is different
For body.onload events, it is only after loading all the page content will trigger, I mean all content, including pictures, Flash and so on. If a lot of this content of the page will let the user wait for a long time.
For the $ (document). Ready () method, this method is only triggered when all of the page's Dom is loaded, and it definitely speeds up the page.
But for some special applications, such as zooming in and out, picture clipping. Do you need to load all the contents of the Web page before executing it? I recommend using the $ (window). Load () method, which will wait until all the contents of the page have been loaded before triggering, and without the drawbacks of the onload event.
| The code is as follows | Copy Code |
<script type= "Text/javascript" > |
|
The above code executes sequentially after all of the page's contents have been loaded.
Of course, don't forget the Unload method that corresponds with it
| The code is as follows | Copy Code |
<script type= "Text/javascript" > |
|
The above code is raised when the page closes.
To throw a JS code before all the DOM is loaded
This method is my favorite when debugging, sometimes in the development of this method
| The code is as follows | Copy Code |
<body> |
|
Yes, is the use of JS closure of the form of JS code embedded in the body, this code will automatically execute, of course, you can embed the JS code directly, this way to pay attention to the order of the problem, as follows:
| The code is as follows | Copy Code |
<body> |
|
$ (document)-Loading order of Ready () and onload
Flip the source of jquery to see $ (document). Ready () How to achieve it:
| code is as follows | copy code |
| if ( JQuery.browser.msie && window = top) (function () { |
|
The result is clear, ie only if the page is not embedded in the frame in the case of Firefox and so on, the first execution of $ (document). Ready (), and then execute the original onload method. For a page embedded in a frame, it is only bound to execute on the Load event, so it is naturally only after the original onload-bound method is executed. And this page just in the test environment there is no access to the resources, the more than 10-second delay is that it magnified the time lag.
$ (document). The difference between ready () and Window.onload
1. Execution time
Window.onload must wait until all elements of the page including the picture have been loaded before they can be executed.
$ (document). Ready () is executed after the DOM structure has been drawn and does not have to wait until the load has finished.
2. Different number of writes
Window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one
$ (document). Ready () can be written multiple at the same time and can be executed
3. Simplified wording
Window.onload did not simplify the wording
$ (document). Ready (function () {}) can be simply written as $ (function () {});
As an example of a browser loading document, the browser adds events to the DOM element through Javascript after the page is loaded. In regular Javascript code, the Window.onload method is usually used, whereas in Jquery, the $ (document) is used. Ready () method. $ (document). The Ready () method is the most important function in the event module, which can greatly improve the speed of the Web application.
Window.load $ (document). Ready ()
The execution time must wait for all content in the Web page to be loaded (including the picture) to perform after all the DOM structures in the Web page have been drawn, and the contents of the DOM element can be associated without loading
Number of writes cannot be written at the same time
The following code does not execute correctly:
| The code is as follows | Copy Code |
| Window.onload = function () { Alert ("Text1"); }; Window.onload = function () { Alert ("Text2"); }; |
|
Results output only the second can write multiple
The following code executes correctly:
| The code is as follows | Copy Code |
| $ (document). Ready (function () { Alert ("Hello World"); }); $ (document). Ready (function () { Alert ("Hello again"); }); The result is output twice. Simplified writing without $ (function () { Do something }); |
|
In addition, it is important to note that because the events registered within the $ (document). Ready () method are executed as long as the DOM is ready, the associated file for the element may not be downloaded at this time. For example, a picture-related HTML download is complete and has been parsed into a DOM tree, but it is quite possible that the picture has not been loaded yet, so properties such as the height and width of the picture are not necessarily valid at this time. To solve this problem, you can use another method of page loading in Jquery---the Load () method. The Load () method binds a handler function in the OnLoad event of the element. If the handle function is bound to the Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the processing function is bound to the element, it is triggered after the element's contents have been loaded.
The Jquery code is as follows:
| The code is as follows | Copy Code |
| $ (window). Load (function () { Writing code ); equivalent to the following code in JavaScript Window.onload = function () { Writing code } |
|
Recently, when I changed a page embedded in a frame, I used jquery to do the effect, and the page itself was bound to the OnLoad event. After the change, Firefox test under normal fluency, IE will wait for a few seconds of jquery effect only appear, Day Lily is cold.
At first thought it was conflicting with the method that was loaded by itself onload. The common saying on the Internet is $ (document). Ready () is executed after page Dom parsing completes, and the OnLoad event is executed after all resources are ready to be completed, that is, $ (document). Ready () is to be executed before the onload, Especially when the page picture is larger, this time difference may be greater. But I this page is clearly the picture is displayed for more than 10 seconds, still do not see the effect of jquery out.
Delete the OnLoad loading method try, the result is the same, it seems not necessary to the original OnLoad event binding also use $ (document). Ready () to write. What is the reason that makes Firefox normal and IE can? Then debugging, found that the original binding of IE under the OnLoad method before the $ (document). Ready (), while Firefox executes the contents of $ (document). Ready (), then executes the original OnLoad method. This and the online statement does not seem to be exactly the same ah, oh, a little meaning, as if more and more close to the truth.
Flip the source of jquery to see $ (document). Ready () How to achieve it:
| code is as follows | copy code |
| if ( JQuery.browser.msie && window = top) (function () { if (jquery.isready) return; try { Document.documentElement.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
