JS DOM编程笔记 - 详解load事件（十五）

最新推荐文章于 2024-04-24 09:22:16 发布

小帅的编程笔记

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.5k

点赞数

分类专栏：小帅的编程笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cmdfas/article/details/121070633

版权

小帅的编程笔记专栏收录该内容

117 篇文章 4 订阅

订阅专栏

今天我们来学习JavaScript中的load事件，包括window的load事件，图片、script的load事件。

window load事件

对于window对象的load事件来说，当整个HTML页面的所有依赖资源（JS文件、CSS文件、图片等）加载完成时将会触发。

处理load事件，可以使用addEventListener() 方法来注册一个事件监听器：

window.addEventListener('load', (event) => {
  console.log('页面已完成加载');
});

或者也可以使用window对象的onload属性：

window.onload = (event) => {
  console.log('页面已完成加载');
};

如果我们维护一个老系统或者历史遗留项目中，可能会发现load事件注册在body元素的属性上

<!DOCTYPE html>
<html>
<head>
  <title>JS load 事件</title>
</head>
<body onload="console.log('加载完成!')">
</body>
</html>

当然最佳实践为尽可能使用 addEventListener()方法来监听onload 事件.

图片 load事件

除了页面的load事件，图片也有load事件，处理图片load事件也可以使用图片元素的 addEventListener()方法。

使用图片的load事件来判断图片是否在页面中已经完成加载

<!DOCTYPE html>
<html>
<head>
  <title>图片load 事件</title>
</head>
<body>
  <img id="logo">
  
  <script>
    let logo = document.querySelector('#logo');

    logo.addEventListener('load', (event) => {
      console.log('Logo图片加载完成!');
    });

    logo.src = "logo.png"
  </script>
</body>
</html>

同样我们也可以使用<img>元素的 onload 属性来绑定onload 事件

<img id="logo" 
     src="logo.png" 
     onload="console.log('图片加载完成!')">

如果图片为动态创建的DOM元素，可以在插入到页面之前添加onload事件

window.addEventListener('load' () => {
  let logo = document.createElement('img');
  // 绑定load事件
  logo.addEventListener('load', (event) => {
    console.log('Logo图片加载完成!');
  });
  // 插入到body中
  document.body.appendChild(logo);
  logo.src = 'logo.png';
});

script load事件

除了图片元素支持load事件，script元素也不同程度的支持load事件。

script的load事件可以用来检查 JavaScript 文件是否已完成加载。

和图片略有不同，浏览器仅在src属性有值且script元素已经添加到页面中才会开始下载JS文件。

下面代码中，我们通过绑定load事件来判断app.js文件是否已加载完成。

window.addEventListener('load', checkJSLoaded)

function checkJSLoaded() {
  // 动态创建一个script元素
  let script = document.createElement('script');

  // 监听load事件
  script.addEventListener('load', (event) => {
    console.log('app.js 文件加载完成');
  });

  // 加载JS文件
  script.src = 'app.js';
  document.body.appendChild(script);
}

总结

window对象的load事件在文档完全加载后发生，包括所有依赖资源（JS文件、CSS文件、图片等）。
<img> 和<script>元素也支持加载事件。
建议使用addEventListener()方法来监听onload 事件。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新

小帅的编程笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS DOM编程笔记 - 详解load事件（十五）

今天我们来学习JavaScript中的load事件，包括window的load事件，图片、script的load事件。window load事件对于window对象的load事件来说，当整个HTML页面的所有依赖资源（JS文件、CSS文件、图片等）加载完成时将会触发。处理load事件，可以使用addEventListener() 方法来注册一个事件监听器：window.addEventListener('load', (event) => { console.log('页面已完成加载');
复制链接

扫一扫