JavaScript的window.load小记

时间 2019-11-08

标签 javascript window.load window load 栏目 JavaScript 繁體版

原文原文链接

load事件一般用于检测文档内容或者图片是否加载完毕。javascript

本文着重介绍注册在window对象上load事件，也就是window.onload事件。css

关于事件处理函数注册，能够参阅如何注册事件处理函数一章节。html

浏览器支持:java

（1）.IE浏览器支持此事件。浏览器

（2）.edge浏览器支持此事件。函数

（3）.火狐浏览器支持此事件。spa

（4）.Opera浏览器支持此事件。code

（5）.谷歌浏览器支持此事件。htm

（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] 纯文本查看 复制代码

1 2	`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事件。