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:
Copy CodeThe code is as follows: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 been loaded well, this time, click on certain buttons, will cause an unexpected situation, this time,
Need to use:
Copy CodeThe code is as follows:The following is reproduced in the content,
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 have to write this
<body onload= "fn1 (), fn2 ()" ></body> looks extremely ugly if used with $ (window). Load () We can load multiple functions like this
Copy CodeThe code is as follows: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 everything on the page
Load is done, 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 been fully loaded and the user is already on the action page this situation, so that the effect of the page is not as we expected the effect of the same,
So here I recommend the use of $ (document). Ready (function () {}), or abbreviated as $ (function () {}), because he will execute when the DOM element of the page is loaded,
Without waiting for pictures or other media to download.
But sometimes we do need to wait until everything on 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 different choices in combination with specific needs.
Finally, a section of jquery code executed before all DOM elements are loaded
Copy CodeThe code is as follows:Oh, sometimes we also have this demand!
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 ()
The execution time must wait until all content in the Web page is loaded (including pictures) to execute after all the DOM structures in the Web page have been drawn, and the content that can be associated with the DOM element is not loaded
The number of writes cannot be written in multiple
The following code does not execute correctly:
1 |
window.onload = function(){ |
2 |
alert(“text1”); |
3 |
}; |
4 |
window.onload = function(){ |
5 |
alert(“text2”); |
6 |
}; |
The result outputs only the second one can write multiple
The following code executes correctly:
1 |
$(document).ready(function(){ |
2 |
alert(“Hello World”); |
3 |
}); |
4 |
$(document).ready(function(){ |
5 |
alert(“Hello again”); |
6 |
}); |
Results are output twice
Simplified notation No
1 |
$(function(){ |
2 |
// do something |
3 |
}); |
In addition, it is important to note that because the event is registered within the (document). Ready () method, as long as the DOM is in place, the associated file for the element may not have been downloaded at this time. For example, the image-related HTML download is complete, and has been parsed into the DOM tree, but it is possible that the picture has not been loaded, so the height and width of the sample is not necessarily valid at this time. To solve this problem, you can use another method in Jquery about page loading---the load () method. The Load () method binds a handler function in the OnLoad event of the element. If the handler is bound to a Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the handler 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 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:
01 |
if( jQuery.browser.msie && window == top ) (function(){ |
02 |
if(jQuery.isReady) return; |
03 |
try{ |
04 |
document.documentElement.doScroll("left"); |
05 |
} catch( error ) { |
06 |
setTimeout( arguments.callee, 0 ); |
07 |
return; |
08 |
} |
09 |
// and execute any waiting functions |
10 |
jQuery.ready(); |
11 |
})(); |
12 |
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.
$ (document). Ready () is a shortcut that jquery responds to the OnLoad () event in JavaScript and performs function processing. Although the two events have a great similarity in the execution effect.
But there is a big difference between the two in the trigger time.
The Window.onload () event is triggered when a Web page is completely downloaded to the client browser, and all DOM elements on the page are accessible after the page is fully downloaded. This approach has a great advantage: no need to consider the order in which DOM elements are loaded.
The (document). Ready () event is triggered when the DOM is fully in place and does not require all page DOM elements to be loaded into the browser. Once the HTML is parsed into a DOM element, the event runs. This is better than the OnLoad () event: $ ( Document). Ready () to manipulate the DOM elements of the page when the page is not fully downloaded.
As an example: if a page needs to process a lot of images, we can use the ready () event to control the behavior of the image <image> elements, such as showing hidden, flipping images, and so on. And if you use Widow.onload () The event requires that all images of the page be fully downloaded before the image element can be accessed. And if you need to add a link to the image, you also need to complete the download of all the images before you can see the effect.
So in this case we should use the $ (document). Ready () event.
However, if you want to manipulate attributes such as the height width of the image, the onload () event waits for the image to be downloaded before it can access the first attribute of the image.
A. Load () method that is equivalent to the onload () event is also provided in jquery.
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
