以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。
在常规的Javascript代码中,通常使用 window.onload = function(){} 的方式,而在jQuery中常使用的则是 $(document).ready(function(){}) 的方式。
事实上,JavaScript原生的 window.onload = function(){} 等价于jQuery的 $(window).load(function(){}) ,而jQuery的 $(document).ready(function(){}) 则在JavaScript中没有原生对应事件。
jQuery的 $(document).ready(function(){}) 是事件模块中最重要一个函数,可以极大的提高Web应用程序的速度。但需要注意的一点是,由于在 $(document).ready(function(){}) 方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕并且已经解析为DOM树了,但很有可能此时图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。
要解决这个问题,可以使用jQuery中另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
1.执行时机不同。
JavaScript原生的 window.onload = function(){} 是必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行的,因此jQuery的 $(window).load(function(){}) 也同样有着这样的特性,即必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行。
而jQuery的 $(document).ready(function(){}) 是只要网页中所有DOM结构绘制完毕后就执行,因此可能DOM元素关联的内容并没有加载完。
2.编写个数限制不同。
JavaScript的onload事件一次只能保存对一个函数的引用,他会自动用最后面的函数覆盖前面的函数,因为 window.load 是DOM2级事件。
但jQuery的 $(window).load(function(){}) 却没有这样的限制,可以编写多个,根据编写的前后顺序依次执行,因为在这里jQuery的实现方式是DOM3级事件,而 $(document).ready(function(){}) 有着同样的特性。
这两种方式都能够在页面加载后去做一些事情,可以根据不同的场景选用不同的方式。
"后来我才知道,在很多的事情上努力都能有成效,但人与人之间的关系不行,能走到最后的其实一开始就是同路人。"