锋利的jQuery-4--$(document).ready()和window.onload方法的区别

jQuery中的$(document).ready()和JavaScript中的window.onload方法主要有两个方面的不同：

1.执行时机：

onload : 网页中所有的元素和元素的关联文件(包括图片)等完全加载完毕后才执行。

$() : 在dom完全加载完毕后就可调用，此时，网页中的所有元素都是可以被jQuery访问的，但不意味着元素的关联文件都已加载完毕。

注意：

由于在$()方法内注册的事件，只要dom就绪就会被执行，因此可能此时元素的关联文件未下载完成。

例如与图片有关的html下载完毕，并且已经解析为dom树，但很有可能图片还未加载完毕，所以例如图片的宽度和高度这样的属性获取不一定有效。

要解决这个问题可以使用jQuery中的load方法：

load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容(包括窗口，框架，对象和图片等)加载完毕后触发。如果绑定到某个元素上，则会在元素的内容加载完毕后触发。

$(window).load(function(){

});

//等价于javascript中代码

window.onload = function(){

}

2.多次使用：

onload : 只能保存对一个函数的引用，多次调用会产生覆盖。

function one(){
  alert("one");
}

function two(){
  alert("two");
}

window.onload = one;
window.onload = two;

//只弹出two对话框

为了达到两个函数顺序触发的效果，需要再建一个函数

window.onload = function(){
  one();
  two();
}

如果有多个JavaScript文件，每个文件都需要用到window.onload()方法，这种情况用上边的方法会非常麻烦。

$() : 可以多次调用，每次调用都是在现有的行为上追加,注册的函数会按照代码中的先后顺序依次执行。

$(function(){
    one();
});

$(function(){
    two();
});

//依次弹出one, two。

注意：

请确保在body元素的onload事件中没有注册函数，否则不会触发$()事件。