HTMLElement：load 事件

当包含资源的元素成功加载资源时，将为其触发 load 事件。目前，支持的 HTML 元素列表包括：<body>、<embed>、<iframe>、<img>、<link>、<object>、<script>、<style> 和 <track>。

注意：HTMLBodyElement 上的 load 事件实际上是 window.onload 事件的别名。因此，load 事件仅在文档的所有资源加载或出错后才会在 <body> 元素上触发。但是，为了清晰起见，建议将事件处理程序直接附加到 window 对象，而不是 HTMLBodyElement。

此事件不可取消，也不冒泡。

语法

在诸如 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

js
elt.addEventListener("load", (event) => { ... });
// or
elt.onload = (event) => { ... };

事件类型

一个通用的 Event。

示例

此示例在 <img> 元素成功加载其资源时打印到屏幕上。

HTML

html
<img id="image" src="favicon144.png" alt="MDN logo" width="72" />
<div><button onclick="reload()">Reload</button></div>

JavaScript

js
const image = document.getElementById("image");
image.onload = () => {
  document.body.appendChild(document.createElement("div")).textContent =
    "loaded!";
};

function reload() {
  image.src = "favicon144.png";
}

结果

规范

未找到规范

未找到 api.HTMLElement.load_event 的规范数据。
检查此页面是否存在问题 或为其贡献缺失的 spec_url 到 mdn/browser-compat-data。同时确保规范包含在 w3c/browser-specs.

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

  • 相关事件