jquery $ (document). Ready () is similar to the Window.onload method in traditional JavaScript, but differs from the window.onload approach.
1. Execution Time
Window.onload must wait until all the elements of the page that include the picture have been loaded before they can be executed.
$ (document). Ready () is executed when the DOM structure is drawn and does not have to wait for the load to complete.
2. Different writing numbers
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 notation
Window.onload No simplified notation
$ (document). Ready (function () {}) can be simply written as $ (function () {});
In my previous development, I used JavaScript in general, and I used the jquery pattern, most of the time, the first line was:
$ (document). Ready (function () {
...
});
This time, do not have to wait for all the JS and pictures loaded, you can execute some methods, but sometimes, must wait for all the elements are loaded, before you can execute some methods, for example, some pictures or what other aspects have not loaded well, this time, click on some buttons, Will cause an unexpected situation, this time, you need to use:
$ (window). Load (function () {
$ ("#btn-upload"). Click (function () {//For example:
Uploadphotos ();
});
});
Here is the content of the reprint:
With $ (window). Load (function () {...}) Without Body.onload () for a few reasons
First of all, they are all elements of the page (including HTML tags and references to all images, flash and other media) executed after loading, which is what they have in common.
No body. Onload () Reason 1:
If we want to load multiple functions at the same time, we must write <body onload= "fn1 (), fn2 ()" ></body> looks extremely ugly if used with $ (window). Load () We can load multiple functions like this
$ (window). Load (function () {
Alert ("Hello, I am jquery!");
});
$ (window). Load (function () {
Alert ("Hello, I am also jquery");
});
It will execute the two functions from the top down and look much prettier.
No body. Onload () Reason 2:
With body. Onload () is not able to achieve the full separation of JS and HTML, this is a very serious problem. Also use $ (window). Load (function () {...}) and Body.onload () have the same problem, because at the beginning, they all need to wait until all the content of the page is loaded to execute, but if the speed is slow, loading a page often takes a long time (a few seconds to more than 10 seconds, or even longer ...), So we often encounter the page is not fully loaded and the user is already in the operation of the page this situation, so that the effect of the page is not the same as we expected, so here I recommend the use of $ (document). Ready (function () {}), or shorthand $ ( function () {}) because it executes when the DOM element of the page is loaded, without having to wait until the picture or other media has finished downloading. But sometimes we do need to wait until everything on the page is loaded and then execute the function we want to execute, so we should use $ (window). Load (function () {...}) It is also necessary to use $ (function () {}) to make different choices in combination with specific needs. Finally, a section of jquery code executed before all DOM elements are loaded is attached.
The browser loads the document as an example, and after the page is loaded, the browser adds events to the DOM element via Javascript. In regular Javascript code, the Window.onload method is typically used, whereas in Jquery, the $ (document) method is used. $ (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 () Execution time must wait for all content in the Web page to finish loading (including pictures) to execute after all DOM structures in the Web page have been drawn, can be able to associate content with the DOM element and not be loaded at the same time to write multiple A
The following code does not execute correctly:
Window.onload = function () {
Alert ("Text1");
};
Window.onload = function () {
Alert ("Text2");
};
<script type= "Text/javascript" >
(function () {
Alert ("Dom has not yet loaded Oh!");
}) (JQuery)
</script>
The result outputs only the second one can write multiple
The following code executes correctly
$(document).ready(function(){ alert(“Hello World”); }); $(document).ready(function(){ alert(“Hello again”); }); $(function(){ // do something }); Recently, when changing a page embedded in a frame, jquery was used to make the effect, and the page itself was bound to the OnLoad event. After the change, Firefox test normal and smooth, ie will wait for a teenager to the effect of jquery before it appears, yellow flowers are cold.
Initially thought to be in conflict with the method itself that onload loads. The popular view on the Internet is $ (document). Ready () is executed after the page Dom parsing is complete, and the OnLoad event is executed after all resources are ready to complete, that is, $ (document). Readiness () is to be executed before onload, Especially when the page picture is larger, the time difference may be greater. But my page is clear that the pictures are displayed for more than 10 seconds, but also see the effect of jquery out.
Delete the onload load method try, the result is the same, it seems that there is no need to the original OnLoad event binding also use $ (document). Ready () to write. What is the reason that Firefox is normal and IE can do it? Then debugging, found that the original binding of the OnLoad method is before the $ (document). The content of Ready () executes, and Firefox executes the contents of the $ (document) first. Ready (), and then the original OnLoad method. This and the online statement does not seem to be exactly the same ah, oh, a little meaning, seems to be closer to the truth.
Turn over the source of jquery to see the $ (document). How to do it:
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 ); The result is clear, ie only in the case of the page is not embedded in the frame, and Firefox, and so on, first execute $ (document). The contents of ready (), then the original OnLoad method. For a page embedded in a frame, the binding is only executed on the Load event, so it is natural that the original onload binding method is executed. And this page is just in the test environment, there is an inaccessible resource, the delay of more than 10 seconds is its magnified time difference.
jquery $ (document). The difference between ready () and Window.onload
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
