JavaScript的window.load小记
JavaScript的window.load小记
load事件通常用于检测文档内容或者图片是否加载完毕。
本文着重介绍注册在window对象上load事件，也就是window.onload事件。
关于事件处理函数注册，可以参阅如何注册事件处理函数一章节。
浏览器支持:
（1）.IE浏览器支持此事件。
（2）.edge浏览器支持此事件。
（3）.火狐浏览器支持此事件。
（4）.Opera浏览器支持此事件。
（5）.谷歌浏览器支持此事件。
（6）.safria浏览器支持此事件。
网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:
（1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。
（2）.通过window.onload来执行脚本代码。
第一种方式感觉比较凌乱（其实推荐使用），我们通常需要将脚本代码放在一个更为合适的地方，window.onload方式将是一个良好的选择。window.onload是一个事件，当文档内容完全加载完成会触发该事件。可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。
先看一段代码实例:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>代码的初衷是将div的背景颜色设置为#F90，但是并没有实现此效果，因为代码是顺序执行的，当执行到document.getElementById("#bg").style.backgroundColor="#F90"的时候，还没有加载到此div对象，所以设置也就不能够成功。代码修改如下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>代码完成将div背景颜色设置为#F90，将设置背景颜色的代码放置在window.onload的事件处理函数中，当文档加载完成后，才会执行事件处理函数，保证文档已经加载完成。
事件处理函数绑定:
（1）.window.onload=function(){}：
前面的代码就是使用此种方式为window.onload事件绑定事件处理函数，绑定的是一个匿名函数，当然也可以绑定具名函数，代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function myalert(){
alert("绑定成功！");
}
</script>
</head>
<body>
</body>
</html>不能以以下方式为此事件绑定多个事件处理函数：
[JavaScript] 纯文本查看 复制代码
window.onload=function a(){}
window.onload=function b(){}上代码不能为window.onload事件绑定多个事件处理函数，最后一个会覆盖前面的所有函数。
代码可以变通一下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
function a(){
document.getElementById("bg").style.backgroundColor="#F90";
}
function b(){
document.getElementById("bg").style.width="200px";
}
a();
b();
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>（2）.addEventListener()和attachEvent():
关于这两种方式可以参阅JavaScript addEventListener()一章节。
下面再看一个为Image图片对象注册load事件处理函数的代码。
[JavaScript] 纯文本查看 复制代码
var img=new Image();
img.onload=function(){
var iheight=img.height;
var iwidth=img.width;
alert(iwidth);
};
img.src="delete.gif";如果图片加载完毕，那么就会触发load事件。
腾讯云开发者
