jQuery 的ready事件和 JavaScript 的load事件对比

时间:2024-09-05 13:04:02

为了理解2个事件的异同,先了解一下HTML文档加载顺序

HTML DOM文档加载步骤

HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤

1, 解析HTML结构

2,加载外部脚本和样式表文件

3,解析并执行脚本代码

4,构造HTML DOM模型

5,加载图片等外部文件

6,页面加载完毕

执行时机

  load 事件必须等到页面中所有内容全部加载完毕之后,才被执行,如果一个页面中包含了大数据的多媒体文件,则就会出现页面文档已经呈现出来,二由于网页数据还没有完全加载完毕,导致load事件不能够即使被触发。使得网页呈现和脚本初始化配置不能保存同步,从而影响了页面的可用性。

  而jQuery的ready是在DOM结构绘制完毕之后就执行,也就是说它先于外部文件的加载就被执行了,这样就能确保文档的呈现和脚本初始化保持同步。

  总之,ready事件先于Load事件被激活,如果网页文档中没有加载外部文件,则他们的响应时间基本上是相同的。

编写个数

  JavaScript的load事件只能够被编写一次,下面的写法是不允许的,此时他仅仅能够影响最后一次指定的事件处理函数,

  

<script type = 'text/javascript'>
window.onload = function(){
alert('页面初始化1');
}
window.onload = function(){
alert('页面初始化2');
}
window.onload = function(){
alert('页面初始化3');
}
</script>

如果希望这3个事件处理函数中的代码都被执行,则应该吧他们包含在一个处理函数中。

<script type = 'text/javascript'>
var f1 = function() {
alert("页面初始化1");
}
var f2 = function() {
alert("页面初始化2");
}
var f3 = function() {
alert("页面初始化3");
}
window.onload = function(){
f1();
f2();
f3();
} </script>

而对于JQuery 的ready事件类型来说,我们可以在同一个文档中多次定义,例如

<script src = "jquery.1.8.2.js" type = "text/javascript"> </script>
<script type = "text/javascript">
$(function() {
alert("页面初始化1");
});
$(function() {
alert("页面初始化2");
});
$(function() {
alert("页面初始化3");
});
</script>

这对于复杂页面中多次配置初始化程序非常重要,这样方便了用户根骨需要进行设计

  

参考自《jquery开发完全技术宝典》