HTMLElement: load 事件
load 事件会在包含资源的元素成功加载资源后触发。当前支持该事件的 HTML 元素包括：<body>、<embed>、<iframe>、<img>、<link>、<object>、<script>、<style> 和 <track>。
注意：HTMLBodyElement 上的 load 事件实际上是 window.onload 事件的别名。因此，load 事件只会在文档的所有资源加载完成或出错后，在 <body> 元素上触发一次。但是，为了清晰起见，建议直接将事件处理器附加到 window 对象上，而不是 HTMLBodyElement。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("load", (event) => { })
onload = (event) => { }
事件类型
一个通用的 Event。
示例
此示例将在 <img> 元素成功加载其资源时，将消息打印到屏幕上。
HTML
html
<img
id="image"
src="/shared-assets/images/examples/favicon144.png"
alt="MDN logo"
width="72" />
<div><button>Reload</button></div>
JavaScript
js
const image = document.getElementById("image");
image.onload = () => {
document.body.appendChild(document.createElement("div")).textContent =
"loaded!";
};
document.querySelector("button").addEventListener("click", reload);
function reload() {
image.src = "/shared-assets/images/examples/favicon144.png";
}
结果
规范
| 规范 |
|---|
| UI 事件 # event-type-load |
| HTML # handler-onload |
| HTML # event-load |
浏览器兼容性
加载中…