Window: load 事件

load 事件在整个页面加载完成后触发，包括所有依赖资源，例如样式表、脚本、iframe 和图像，但那些延迟加载的资源除外。这与DOMContentLoaded形成对比，后者在页面 DOM 加载完成后立即触发，而无需等待资源加载完成。

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

注意：所有名为 load 的事件都不会传播到 Window，即使 bubbles 初始化为 true。要捕获 window 上的 load 事件，该 load 事件必须直接分派到 window。

注意：主文档加载完成后分派的 load 事件确实在 window 上分派，但有两个被修改的属性：target 是 document，而 path 是 undefined。这两个属性因遗留兼容性而被修改。

语法

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

js
addEventListener("load", (event) => {});

onload = (event) => {};

事件类型

一个通用的Event。

示例

页面完全加载后记录一条消息

js
window.addEventListener("load", (event) => {
  console.log("page is fully loaded");
});

相同，但使用 onload 事件处理程序属性

js
window.onload = (event) => {
  console.log("page is fully loaded");
};

实时示例

HTML

html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

JavaScript

js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += `DOMContentLoaded\n`;
});

结果

规范

规范
UI 事件
# event-type-load
HTML 标准
# 延迟加载事件

浏览器兼容性

BCD 表格仅在启用

另请参阅