那些被漏掉的JQuery总结（一）——Window.Onload和document.ready的对比(补充Page_load)

引言：

本次项目中要实现一个前台效果。当我将代码提交更新后，始终实现不了我要的效果。调试了，也咩有发现问题，代码是及其简单的，而且代码是没有错误的。于是开始怀疑是没有获取到页面元素。最终找到真相！是自己没有搞清楚，Window.onLoad和document.ready的区别。现在拿出来和大家一起分享下。

1、执行事件

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2、编写的次数

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

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

3、简化的写法

window.onload没有简化写法

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

4、原理分析

由于在 必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 。网页中所有 DOM 结构绘制完毕后就执行，可以能 DOM 元素关联的内容并没有加载完。另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用
Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

小结：

尽管工作紧张，对于过程中遇到的问题以及相应的解决办法也还是要及时进行记录和总结。否则，你的学习和工作学到的东西，能够积累沉淀下来的就会很少！

补充：页面的page_Load事件，发生在window.Onload事件和document.Ready事件之前。因为我们的请求会先到服务器端，服务器端执行 page_load ，然后返回，浏览器再接收数据，进行DOM解析，所以：他们三者的顺序是：page_Load事件——>Document.Ready——>window.onload。