以浏览器装载文档为例，在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。

在常规的Javascript代码中，通常使用 window.onload = function(){} 的方式，而在jQuery中常使用的则是 $(document).ready(function(){}) 的方式。

事实上，JavaScript原生的 window.onload = function(){} 等价于jQuery的 $(window).load(function(){}) ，而jQuery的 $(document).ready(function(){}) 则在JavaScript中没有原生对应事件。

jQuery的 $(document).ready(function(){}) 是事件模块中最重要一个函数，可以极大的提高Web应用程序的速度。但需要注意的一点是，由于在 $(document).ready(function(){}) 方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕并且已经解析为DOM树了，但很有可能此时图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题，可以使用jQuery中另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

1.执行时机不同。

JavaScript原生的 window.onload = function(){} 是必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行的，因此jQuery的 $(window).load(function(){}) 也同样有着这样的特性，即必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行。

而jQuery的 $(document).ready(function(){}) 是只要网页中所有DOM结构绘制完毕后就执行，因此可能DOM元素关联的内容并没有加载完。

2.编写个数限制不同。

JavaScript的onload事件一次只能保存对一个函数的引用，他会自动用最后面的函数覆盖前面的函数，因为 window.load 是DOM2级事件。

但jQuery的 $(window).load(function(){}) 却没有这样的限制，可以编写多个，根据编写的前后顺序依次执行，因为在这里jQuery的实现方式是DOM3级事件，而 $(document).ready(function(){}) 有着同样的特性。

这两种方式都能够在页面加载后去做一些事情，可以根据不同的场景选用不同的方式。

"后来我才知道，在很多的事情上努力都能有成效，但人与人之间的关系不行，能走到最后的其实一开始就是同路人。"

$(window).load(function(){})和$(document).ready(function(){})的区别