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

最新推荐文章于 2024-04-23 15:57:32 发布

weixin_30700977

最新推荐文章于 2024-04-23 15:57:32 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/lijinwen/p/5516715.html

版权

为了理解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开发完全技术宝典》

转载于:https://www.cnblogs.com/lijinwen/p/5516715.html