曲径通幽论坛

标题: 加载(load)与卸载(unload)事件 [打印本页]
作者: easy    时间: 2013-4-23 00:07
标题: 加载(load)与卸载(unload)事件
加载事件(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">
<!--
    var imgArr = new Array();
    imgArr[0] = "img/1.jpg";
    imgArr[1] = "img/2.jpg";
    imgArr[2] = "img/3.jpg";
    imgArr[3] = "img/4.jpg";
   
  // 无此图片
    imgArr[4] = "img/5.jpg";
   
    var nowImg = 0;
   
    function changeImg() {
        if (nowImg >= imgArr.length) {
            nowImg = 0;
        }
        myImg.src = imgArr[nowImg];
        nowImg++;
    }
        
-->
</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 事件，弹出一个警告框，其内容是“卸载文档”。



欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2