您的位置:首页> 前端教程> JS教程
文章导航

window.onload 事件

2020-5-21 21:02| 作者: admin| 查看: 115760| 评论: 4|来自: 蚂蚁部落

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

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

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

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://www.softwhy.com/" /> 
<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>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/22/124743jebq21z6rddp1zdu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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.softwhy.com/" /> 
<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>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/22/124816ymcpszsqwffxb4em.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

事件处理函数绑定:

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

关于如何注册事件处理函数,本文不做介绍,具体参阅JavaScript 注册事件处理函数一章节。

window.onload事件缺点:

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

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

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

关于 DOMContentLoaded 可以参阅 JavaScript DOMContentLoaded 事件一章节。

3

鲜花
5

握手

雷人

路过

鸡蛋

刚表态过的朋友 (8 人)

发表评论

最新评论

引用 小风扇 2020-2-19 21:28
用心了,写的通俗易懂
引用 一半一半 2018-9-14 08:30
引用 小人很快活 2018-3-19 18:53
非常适合初学者学习
引用 皇朝 2018-3-13 18:19
文章很不错

查看全部评论(4)

返回顶部