今天我们来学习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
事件。
扫描二维码关注公众号,回复:
13203868 查看本文章
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
事件。
一起学习更多前端知识,微信搜索【小帅的编程笔记】,每天更新