加载(load)与卸载(unload)事件

easy · 发表于 2013-4-23 00:07:55

加载事件(load) 和卸载事件(unload) 是两个相反的事件。在 HTML 4.01 中，只规定了 body 和 frameset 元素拥有加载和卸载事件，但是大多浏览器都支持 img 元素和 object 元素的加载事件。
以 body 元素为例，加载事件是指整个文档在浏览器窗口中加载完毕后所激发的事件。卸载事件是指当前文档从浏览器窗口中卸载时所发生的事件，即关闭浏览器窗口或从当前网页跳转到其它网页所激发的事件。

下面代码测试了加载和卸载两个事件的情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 失去焦点 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" language="javascript">

</script>

</head>

<body onload="alert('文档加载完毕')" onunload="alert('卸载文档')">
<img src="img/4.jpg" name="myImg" onload="alert('图片加载完毕')" />
<br />
<input type="button" onclick="changeImg()" value="置换图片" />
<br />

   <a href="http://www.baidu.com">跳转到搜索引擎</a>

</body>

</html>

下面仔细分析一下加载与卸载事件，及其它相关细节。

在网页加载时，首先会加载 <img> 标签中定义的一个 img 目录下的 4.jpg 这个图片。当这个图片加载完毕后，就会触发一个 load 加载事件，它会发出一个警告框告诉我们“图片加载完毕”。在我们点击警告框上的“确定”按钮后，页面会继续加载“置换图片”按钮，还有一个跳转到百度首页的链接。到这里，整个页面已经加载完毕，于是触发 <body> 里所定义的加载事件，该加载事件弹出一个提示框，告诉我们“文档加载完毕”。

根据代码知道，在 img 目录下，我们有 1.jpg 到 4.jpg 4 个图片文件，这几个文件的文件名被存储在数组 imgArr[] 中。需要注意的是，img/5.jpg 这个文件并不存在。

我们可以按下“置换图片”按钮来替换页面上的图片。按下按钮后，就会执行 changeImg() 函数，该函数的作用是从 imgArr[] 数组中获得图片地址，并赋值给图片的 src 属性以置换图片；另外，由 JavaScript 中的 for 循环知道，这是个顺序替换。每次图片地址被修改时，都会再次加载新的图片，于是又会触发 <img> 标签中的 load 事件，因此每次单击按钮都会弹出警告框。然而，在 imgArr[] 属主中，第 5 个元素(img/5.jpg, imgArr[4])代表的地址是一个不存在的地址；因此，在显示该地址所指向的图片时，不会弹出“图片加载完毕”的警告框。也是因为图片没有加载，因此也不会存在“加载完毕”的状态。

在页面的最后有一个超链接。在单击该连接时，浏览器窗口会加载百度首页。也就是说，当前的网页被卸载了，因此这时会激发 <body> 标签中的 unload 事件，弹出一个警告框，其内容是“卸载文档”。

		自动登录	找回密码
密码			立即注册

[HTML] 加载(load)与卸载(unload)事件

浏览过的版块