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

$ (document).ready() 和 window.onload 在表面上看都是页面加载时我们就去执行一个函数或动作，但是在具体的执行上 $ (document) ready() 和 window onload 还是有区别的。

执行时间

• window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。
• $ (document).ready() 只需要等待网页中的DOM结构加载完毕就能执行。

执行次数

• window.onload 只能执行一次，如果第二次，那么第一次的执行会被覆盖。
• $ (document).ready() 可以执行多次，并且不会发生覆盖。

简化写法

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

一般情况下window的load()方法都是用来设置body标签的onload事件，但onload事件是要在页面的元素全部加载完了才触发的，这也包括页面上的图片，以及大的表格数据。如果页面上图片较多或图片太大，加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。

而JQuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作，不用等待全部元素加载完成。比如我们只要知道页面某处有一张图片，不一定要等它显示出来就可以对它进行点击操作。

另外需要注意一点，由于在$ (document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，图片的高度和宽度这样的属性此时不一定有效。

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