思洋互动网站建设学前班

ready事件和load事件比较

在前面小节中曾经介绍过jQuery定义的ready事件和JavaScript默认的load事件。下面我们来比较这两个事件的区别。为了理解这两个事件的异同，读者应该先了解HTML文档加载的顺序。

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

(1) 解析HTML结构。

(2) 加载外部脚本和样式表文件。

(3) 解析并执行脚本代码。

(4) 构造HTML DOM模型。

(5) 加载图片等外部文件。

(6) 页面加载完毕。

具体说明如下。

1. 执行时机

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个页面中包含了大容量的多媒体文件，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。

开发人员习惯把页面初始化设置的脚本都放在load事件处理函数中，由于页面数据没有完全加载进来，导致网页文档呈现和脚本初始化配置不能够保持同步，从而影响了页面的可用性。

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

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

2. 编写个数

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

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script type="text/javascript" > 
2. window.onload = function(){  
3.     alert("页面初始化1");  
4. }  
5. window.onload = function(){  
6.     alert("页面初始化2");  
7. }  
8. window.onload = function(){  
9.     alert("页面初始化3");  
10. }  
11. </script> 

如果希望这三个事件处理函数中的代码都被执行，则应该把它们包含在一个处理函数中，其代码如下。

1. <script type="text/javascript" > 
2. var f1 = function(){  
3.     alert("页面初始化1");  
4. }  
5. var f2 = function(){  
6.     alert("页面初始化2");  
7. }  
8. var f3 = function(){  
9.     alert("页面初始化3");  
10. }  
11. window.onload = function(){  
12.     f1();  
13.     f2();  
14.     f3();  
15. }  
16. </script> 

而对于jQuery的ready事件类型来说，我们可以在同一个文档中多次定义。例如，针对上面示例，可以使用jQuery的ready事件类型来设计。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script src="images/jquery-1.3.2.js" type="text/javascript"></script> 
2. <script type="text/javascript" > 
3. $(function(){  
4.     alert("页面初始化1");  
5. });  
6. $(function(){  
7.     alert("页面初始化2");  
8. });  
9. $(function(){  
10.     alert("页面初始化3");  
11. });  
12. </script> 

 

这对于复杂页面中多次配置初始化程序非常重要，也方便了用户根据需要随时进行设计。