window.onload 事件

红太狼 2020-05-23 18:38 1217阅读 0赞

# window.onload 事件

本文将结合代码实例详细介绍一下 window.onload 事件的用法。

页面中很多JavaScript代码往往需要对应的文档结构或者内容加载完毕才能执行。

否则可能会出现一些令初学者比较困惑的现象。

首先看一段代码实例：

```html
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<style type="text/css">
#ant{
  width:100px;
  height:100px;
  border:2px dotted #ccc;
}
</style>
<script>
let oDiv=document.getElementById("ant");
oDiv.style.backgroundColor="#F90";
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>
```

上述代码会报错，谷歌开发者工具控制台截图如下：

![](/images/1590259077090.jpg)

代码分析如下：

（1）.代码本意是将div的背景颜色设置为 "#F90"，但是并未成功，且报错。

（2）.由于顺序执行，当执行到 document.getElementById("ant") 时，div 元素并未加载。

（3）.获取 div 元素对象就失败了，oDiv==null，于是会出现图片中的错误。

可以采用如下三种方式解决上述问题：

（1）.JavaScript 代码放置于页面的底部，当执行 JavaScript 代码的时候，div 元素自然已经加载解析完毕。

（2）.将设置 div 元素的相关代码放置于 window.onload 事件处理函数中。

（3）.将设置 div元 素的相关代码放置于DOMContentLoaded事件处理函数中（后面会有介绍）。

下面采用本文的主角 window.onload 来解决上述问题，代码修改如下：

```html
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<style type="text/css">
#ant{
  width:100px;
  height:100px;
  border:2px dotted #ccc;
}
</style>
<script>
window.onload=function(){
  let oDiv=document.getElementById("ant");
  oDiv.style.backgroundColor="#F90";
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>
```

上述代码运行效果截图如下：

![](/images/1590259062753.jpg)

代码成功实现预期效果，此时window.onload事件的功能得以体现。

此事件在文档内容完全加载完毕时触发，所以将获取和设置div元素的代码放置于window.onload事件处理函数之中，可以确保在设置div背景颜色的时候，div元素已经加载完毕。

**事件处理函数绑定：**

onload 事件准确的将应该是 load 事件，前面加 "on" 是注册事件处理函数的一种方式。

**window.onload事件缺点：**

此事件需要在文档内容完全加载完毕后才会触发，比如需要加载完毕CSS文件或者图片等资源。

很多情况下，图片等资源加载完毕不是必须的，只需要文档结构加载和解析完毕即可。

假设前文设置div元素背景色的需求不变，并且页面有大量图片要加载，如果等待图片完全加载完毕再进行背景色设置，那么设置操作就稍显滞后，也不人性化，此种情况下可以利用 DOMContentLoaded 事件实现上述功能。