区别

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。
$(documrnt).ready()可以同时编写多个，并且都可以得到执行。

3.多个的执行结果

window.onload不能同时写多个，但是有多个时会执行，只是后执行的会将前一次执行的结果覆盖。
$(doucment).ready()可以有多个，并且执行后不会被覆盖。

4.简化写法

window.onload没有简化写法
$ (document).ready(function(){})可以简写成$ (function(){})

JavaScript window.onload

1.使用

该方法用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法。通常用于< body >元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

2.语法

//当只有一个要执行的函数时
window.onload=fn
//页面加载完毕后fn方法会被调用

//有多个要执行的函数时
window.onload=function(){
    
    
	fn1()
	fn2()
	fn3()
}
//页面加载完毕后依次执行fn1、fn2、fn3

3.为什么要使用window.onload

JavaScript中的函数方法需要在HTML文档渲染完毕之后才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样在调用一些JavaScript代码时就可能报“undefined”错误。

例如：

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>没有使用 window.onload() 测试</title>
<style type="text/css">
#bg{
    
    
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

//代码会抛出错误：Uncaught TypeError:Cannot read property 'style' of null
//代码是顺序执行的，当执行到js里的语句时，还没有加载div对象
//使用window.onload就可以正常运行

window.onload事件绑定事件处理函数，绑定的是一个匿名函数，也可以是一个具名函数。

jQuery $(document).ready()

1.使用

当DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生ready事件。
由于该事件在文档就绪后发生，因此把所有其他的jQuery事件和函数置于该事件中是非常好的做法。
ready()函数规定当ready事件发生时执行的代码。
ready()函数仅能用于当前文档，因此无需选择器。

2.语法

//允许一下三种语法 function 是必需的，规定当文档加载后要运行的函数
$(document).ready(function(){
    
    })
$().ready(function(){
    
    })
$(function)

注意

1.ready()函数不应与< body οnlοad="" >一起使用。
2.$ (function(){})在window.onload执行前执行的，$(function(){})类似于原生 js 中的DOMContentLoaded事件。

DOM文档加载步骤

1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

以下是一段在所有DOM元素加载之前执行的jQuery代码

<script type="text/javascript">
	(function(){
    
    
		alert("DOM还没加载")
	})(jQuery)
</script>

以下是网络内容！！！！

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

普遍说法都是$(document).ready()是要在onload之前执行的，当页面图片较大较多的时候，时间差可能会更大。

但是针对上面的问题，IE的jQuery样式没有出现。

接着调试，发现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绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。