方式一:
通过JavaScript注册事件处理程序的传统机制是,把一个函数指定给DOM元素的对应属性。例如,假设我们已经定义了如下函数:
function doStuff(){
//执行某种任务… …
}
那么,我们既可以在HTML标记中指定该函数:<body onload=”doStuff();”>
也可以在JavaScript代码中指定该函数:window.onload=doStuff;
这两种方式都会导致在页面加载完成后执行这个函数。但第2种方式的优点在于,它能使行为更清晰地从标记中分离出来
方式二:
使用jQuery的 ready() 方法。允许使用以下三种语法:
语法1:$(document).ready(function(){
//这里是代码
})
语法2:$().ready(function(){
//这里是代码
})
语法3:$(function(){
//这里是代码
})
方式三:
$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
window.onload = function (){
// 编写代码
}
window.onload与$(document).ready()的区别:
1.执行时间
window.onload会在整个页面的document全部加载完成以后执行。不幸的是这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么页面表现出来的效果就跟我们预期的效果不一样了。
$(document).ready()仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行,包括在加载外部图片和资源之前。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 。因为.onload属性一次只能保存对一个函数的引用,所以不能在现有的行为基础上再增加新行为。
$(document).ready()可以同时编写多个,并且都可以得到执行 。每次调用这个方法都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都将得到执行。而且,这些函数会按照注册它们的顺序依次执行。