onload事件属性，JQ中的load,ready方法
前言
页面中的很多操作，需要我们在所需资源下载完成后，才可以进行操作，而资源没有及时下载，我们进行操作的话，是会报错。因此我们需要熟练掌握哪些事件可以帮助我们在资源准备就绪后，再开始进行相关的操作。接下来我们就原生JS的事件属性onload,JQ中的load，ready方法进行一些讨论。
onload
HTML onload事件属性，常用在<body>中，一旦完全加载所有内容(包括图像，脚本文件，CSS文件等)，就执行一段脚本。
以下内容是参考了《锋利的Jquery》一书，感兴趣的朋友也可以去原书了解.
window.onload的执行时机：必须等待网友中所有的内容加载完毕后(包括图片)才能执行。
编写个数： 不能同时编写多个
1 window.onload = function() { 2 alert(" test1 "); 3 }; 4 window.onload = function() { 5 alert(" test2 "); 6 };
结果只会输出“test2”。
特别注意: 像onload事件之类的使用匿名函数，即window.onload = function() { fnc(); //这里执行函数};这种形式的才是在页面加载完成后执行。
另外使用DOM0级的方式是可以编写多个的。例如:
<body onload="a();b()">
// 代码
</body>
不推荐这么写吧。
onload事件属性存在用户体验的问题，如果当需要下载的资源很大时，需要用户等待很长的时间。
JQ的ready()方法
通过这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，可以极大地提高web应用程序的响应速度。
$(document).ready()执行的时机：网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完.
编写个数：能同时编写多个，比如:
$(document).ready(function() { alert("Hello world"); }); $(document).ready(function() { alert("Hello world"); });
结果两次都输出。同一个页面可以无限次使用$(document).ready()事件，其中注册的函数会按照（代码中的）先后顺序依次执行
简写方式：
$(function() { //代码 });
更详细的介绍，可以看《锋利的Jquery》一书，第四章4.1.1
JQ中的load()方法
但是比如我们需要对图片进行剪切，缩放操作时，需要网页所有的内容加载完毕后才执行的话，可以使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时没有onload事件属性的缺点。
$(window).load(function() { alert("test1"); }); $(window).load(function() { alert("test2"); });
代码会在页面所有内容加载完成后按照先后顺序执行。
《锋利的Jquery》中4.1.1中的描述如下:
另外需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很可能图片还未加载完毕，所有例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用jQuery中另一个页面加载的方法--load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口，框架，对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
补充说明下，JQ中有两个load()方法，一个是JQuery事件load()方法，一个是JQuery Ajax load()方法.
具体调用哪个函数，根据参数而定。
JQuery事件load()方法:
$("img").load(function() {
$("div").text("图像已加载");
});
在图像加载完成后，输出“图像已加载”;
JQuery Ajax load()方法:
load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
$("button").click(function() {
$("div").load("demo_ajax_load.txt");
});
通过AJAX请求来改变div元素的文本。