jquery $(document).ready() 与window.onload的区别

首先，

Jquery 代码：

$(window).load(function (){ 
    // 代码表达式  
 });

等价于：

JavaScript 中的以下代码

Window.onload = function (){ 
      // 编写代码 
}

注意，格式符号。

区别总结：

1、执行时间 

 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

2、编写个数不同 

 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 

 $(document).ready()可以同时编写多个，并且都可以得到执行 

3、简化写法 

 window.onload没有简化写法 

 $(document).ready(function(){})可以简写成$(function(){});

应用细说：

ready()方法，因为执行时间的不同，不一定要等所有的js和图片加载完毕，就可以执行一些方法，不过有些时候，必须要等所有的元素都加载完毕，才可以执行一些方法的时候，比如说，部分图片或者与DOM相关的什么其他方面还没有加载好，所以例如图片的高度和宽度这样的属性此时不一定有效，这个时候，点击某些按钮，会导致出现意外的情况，这时，就需要选择window.onload方法！

最后补充：

在一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现。

那是什么原因使得Firefox正常而IE就不正常呢？

接着调试，发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行，而Firefox则是先执行$(document).ready()的内容，再执行原来的onload方法，这和上面说的完全相反！

翻阅jquery的源码看看$(document).ready()是如何实现的吧：

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 );

结果很明了了，IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。