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

一、执行时间

JavaScript:     window.onload = function(){alert('.......')}；

这样的写法必须等页面加载完：DOM树节点全部生成，页面引用的全部资源加载完成（图片，视频等）。

jQuery:    $(document).ready(function(){alert('.......')});

jquery中的ready()事件，只要DOM节点全部生成，就可以用js操作节点，不必等其它资源加载完毕，因此效率更高！

二、编写个数不同

window.onload不能同时编写多个，如果有多个window.onload()方法，如下代码：只会执行第二个

window.onload = function() {
    alert('text1')
}
window.onload = function() {
    alert('text2')
}

$(document).ready()可以同时编写多个，并且都可以执行，如下代码：

$(document).ready(function(){
    alert('text1')
});
//简写 $()等价于$(document).ready()
$(function(){
    alert('text2')
});

三、简化写法

    window.onload没有简化写法;

     $(document).ready(function(){alert('.......')})可以简写成$(function(){alert('.......')});

特别注意：

    由于在$(document).ready()方法里内注册的事件，只要DOM节点就绪就会被执行，因此可能此时元素的关联文件、图片等未下载完成，列如图片有关的html下载完毕，并且已经解析为DOM树了，但是图片有可能没加载出来，所以此时的图片属性宽高不一定生效。要解决这个问题可以使用jQuery中的load()方法，load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定到window对象上，则会在所有dom节点，页面引用资源（图片，视频等）加载完毕后触发。

jQuery代码如下：

$(window).load(function(){
    //编写代码
});//等价于javascript中的
window.onload = function (){
    //编写代码
}