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

Created by Yiyi_coding
Last edited at 2015年7月13日

---

$(document).ready() 和 window.onload 执行效果看上去都是在页面加载时执行一个函数或动作，但是在具体的细节上$(document).ready()和window.onload还是有区别的，最主要的区别体现在函数执行时间。

1.执行时间

window.onload必须等到网页中所有的元素，包括关联元素（图片、视频等）加载完毕后才能执行。
$(document).ready()是DOM结构树绘制完毕后就执行，不必等到加载完毕（注意，这里面的文档树绘制完不代表全部文件加载完）。
网页解析为DOM树的速度比把网页中的所有关联文件加载完毕的速度快很多

2.编写个数不同

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

window.onload = AAA() {
    alert("AAA");
};
window.onload = BBB(){
    alert("BBB");
};
//结果画面只显示“BBB”

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

$(document).ready(function () {
    alert("AAA");
});
$(document).ready(function () {
    alert("BBB");
});
//结果画面先显示“AAA”，再显示“BBB”

3.简化写法

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

使用$(document).ready(function(){})方法可以让页面“边下载，边执行”，提供更好的浏览体验，但是这种方法也是有缺陷的：例如我们要操作一个图片的长度或者宽度，就需要用window.onload事件，页面所有的图像完全下载之后,才可以访问图像元素。另外可以使用JQuery中另一个关于页面加载的方法—load()方法。load()方法会在元素的onload事件中绑定一个处理函数。
如果处理函数绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发；
如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
jQuery代码：

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

与之等价的javaScript中的代码：

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