jQuery中的$(document).ready()和JavaScript中的window.onload方法主要有两个方面的不同:
1.执行时机:
onload : 网页中所有的元素和元素的关联文件(包括图片)等完全加载完毕后才执行。
$() : 在dom完全加载完毕后就可调用,此时,网页中的所有元素都是可以被jQuery访问的,但不意味着元素的关联文件都已加载完毕。
注意:
由于在$()方法内注册的事件,只要dom就绪就会被执行,因此可能此时元素的关联文件未下载完成。
例如与图片有关的html下载完毕,并且已经解析为dom树,但很有可能图片还未加载完毕,所以例如图片的宽度和高度这样的属性获取不一定有效。
要解决这个问题可以使用jQuery中的load方法:
load()方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图片等)加载完毕后触发。如果绑定到某个元素上,则会在元素的内容加载完毕后触发。
$(window).load(function(){ }); //等价于javascript中代码 window.onload = function(){ }
2.多次使用:
onload : 只能保存对一个函数的引用,多次调用会产生覆盖。
function one(){ alert("one"); } function two(){ alert("two"); } window.onload = one; window.onload = two; //只弹出two对话框
为了达到两个函数顺序触发的效果,需要再建一个函数
window.onload = function(){ one(); two(); }
如果有多个JavaScript文件,每个文件都需要用到window.onload()方法,这种情况用上边的方法会非常麻烦。
$() : 可以多次调用,每次调用都是在现有的行为上追加,注册的函数会按照代码中的先后顺序依次执行。
$(function(){ one(); }); $(function(){ two(); }); //依次弹出one, two。
注意:
请确保在body元素的onload事件中没有注册函数,否则不会触发$()事件。