jQuery 中的 $(document).ready() 和 Window.onload 的区别

Question

在编写网页的时候，需要等到文档加载完毕才执行某些脚本动作，在 JavaScript 中有 window.onload 事件可以使用，在 jQuery 中有 $(document).ready() 可以使用，那么 jQuery 中的 $(document).ready() 和 window.onload 的区别呢？

以浏览器装载文档为例，页面加载完毕后，浏览器会通过 JavaScript 为 DOM 元素添加事件，在常规的 JavaScript 代码中，通常使用 window.onload 方法，而在 jQuery 中，使用的是 $(document).ready() 方法。由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。

例如与图片有关的 HTML 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，此时图片的高度和宽度不一定有效。要解决这个问题，可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的onload 事件中绑定一个处理函数。

如果处理函数绑定给 window 对象，则会在所有内容，包括窗口、框架、对象和图像等加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

下面给出 jQuery ready 与 window.onload 的区别

	window.load	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后(包括图片)才能执行	网页中所有DOM结构绘制完毕后就执行，可以能DOM元素关联的内容并没有加载完
编写个数	不能同时编写多个 以下代码无法正确执行： window.onload = function(){ alert("caibaojian"); }; window.onload = function(){ alert("caibaojian.com"); }; 结果只输出第二个	能同时编写多个 以下代码正确执行： $(document).ready(function(){ alert("Hello Caibaojian"); }); $(document).ready(function(){ alert("Hello caibaojian.com"); }); 结果两次都输出
简化写法	无	$(function(){ // do something });

jQuery 代码如下：

$(window).load(function(){
// 编写代码
});

等价于 JavaScript 中的以下代码

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