执行时机
window.onload
是在网页中所有元素加上所有资源完全加载到浏览器后才执行。- 而
$(document).ready()
中绑定的事件是在dom
完全就绪时就可以被调用,此时对于jQuery
来说都是可以被访问的(关联的资源可能并没有被加载完毕) - 举个例子来说,在
$(document).ready()
中定义了图片的宽高,但由于此时图片还没有被加载完毕,此时的宽高不会生效。要解决这个问题可以使用jQuery
中的load()
方法。 load()
方法会在元素的onload
事件中绑定一个处理函数,如果该处理函数绑定给window对象,则会在所有资源加载完毕后触发,如果load绑定在元素上则会在该元素加载完毕后触发。//jQuery $(window).load(function){ } //等同于 window.onload=function(){ }
多次执行
window.onload
事件每次只能保存对一个函数的引用,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要window.onload
方法就导致编码复杂。- 使用
$(document).ready()
方法能够很好地解决这种问题,每次调用$document.ready()
方法都会在现有行为上追加新的行为,这些行为会根据注册顺序依次执行。function say(str){ alert(str) } $(document).ready(function(){ say('hello') }) $(document).ready(function(){ say('jQuery') }) //依次弹出hello jQuery
简写方式
$(function(){
//是$(document).ready()的简写
})
//或者
$().ready(function(){
//当$()中不带参数时,默认为document
})