jquery $ (document). The difference between ready () and Window.onload

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

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 () {});

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   You must wait for all content in the Web page to finish loading (including pictures) to execute   After all the DOM structures in the Web page have been drawn and executed, the content associated with the DOM element is not loaded   , the
write number   cannot write multiple   at the same time;
The following code does not execute correctly:  
Window.onload = function () { 
   alert ("Text1");  
}; 
window.onload = function () {& nbsp
   alert ("Text2");  
}; 
Results output only a second   can write multiple   simultaneously;
The following code executes correctly:  
$ ( Document). Ready (function () { ,
   alert ("Hello World"),  
});  
$ (document). Ready ( function () { 
   alert ("Hello again");  
});  
results output    twice;
Simplified notation   None   $ (function () { 
  //do something 
});  

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:

Copy the code code as follows:

[HTML]View PlainCopyprint?

1. if  ( jQuery.browser.msie &&  window == top )   (function () {   
2. if   (Jquery.isready)  return;   
3. TRY {   
4. Document.documentElement.doScroll ("left");    
5. } catch ( error )  {   
6. setTimeout (  arguments.callee, 0 );    
7.  return;   
8. }   
9.  // and execute any waiting  functions   
10. Jquery.ready ();    
12. jQuery.event.add ( window,  "Load", jquery.ready );   

if (jQuery.browser.msie && window = = top) (function () {if (jquery.isready) return; try {document.documentelemen T.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.

Transfer from http://blog.csdn.net/xiebaochun/article/details/36375481

jquery $ (document). The difference between ready () and Window.onload