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 () {});
In my previous development, I used JavaScript in general, and I used the pattern of jquery, which is most of the time, the first line is written:
This time, not necessarily wait for all the JS and picture 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 other aspects have not been loaded well, this time, click on some buttons, will cause an unexpected situation, this time,
Need to use:
Here are the contents of the reprint,
With $ (window). Load (function () {...}) Without Body.onload () a few reasons
First they are all in the page all elements (including HTML tags and references to all pictures, Flash and other media) after the load is executed, this is what they have in common.
No body. Onload () Reason 1:
If we want to load multiple functions at the same time, we have to write
<body onload= "fn1 (), fn2 ()" ></body> looks extremely ugly if used $ (window). Load () We can load multiple functions like this
This way it will execute the two functions from the top down and look much prettier.
No body. Onload () Reason 2:
With body. Onload () can not do JS and HTML completely separate, this is a very serious problem.
In addition, use $ (window). Load (function () {...}) and Body.onload () all have the same problem, because at first, they all need to wait until all the content of the page
Loading is completed, 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
Will encounter the page has not fully loaded and the user has been operating the page of 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 $ (function () {}), because he will execute when the DOM element of the page is loaded.
Without having to wait for the picture or other media to finish downloading.
But sometimes we do have to wait until everything in the page is loaded and then execute the function we want to execute, so it's time to use $ (window). Load (function () {...}) Still is
The use of $ (function () {}) often requires a different choice in combination with specific needs.
Finally, attach a section of jquery code that executes before all DOM elements are loaded
Oh, sometimes we also have this demand!
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:
Window.onload = function () {
alert ("Text1");
Window.onload = function () {
alert ("Text2");
Results output only the second can write multiple
The following code executes correctly:
$ (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:
$ (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:
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 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.
The above is the entire contents of this article, learn more jquery syntax, you can see: "JQuery 1.10.3 Online Handbook", also hope that we support the cloud-dwelling community.
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
