Window：load事件
load 事件在整个页面加载完毕时触发，包括所有依赖资源，如样式表、脚本（包括 async、deferred 和 module 脚本）、iframe 和图像，但不包括那些已惰性加载的资源。这与 DOMContentLoaded 不同，后者在页面 DOM 加载完毕后立即触发，而不等待资源加载完成。
此事件不可取消，也不会冒泡。
注意：所有名为 load 的事件都不会向 Window 传播，即使将 bubbles 设置为 true 也是如此。要捕获 window 上的 load 事件，必须直接将该 load 事件分派给 window。
注意： 当主文档加载完毕时分派的 load 事件确实会在 window 上分派，但有两个被修改的属性：target 是 document，而 path 是 undefined。这两个属性的修改是出于历史兼容性考虑。
为了避免在脚本所操作的 DOM 完全构建之前运行脚本，您可以将脚本放在文档主体末尾，紧接在 </body> 标签之前，而无需将其包装在事件监听器中。通常，您应该只使用 load 事件来等待外部资源（如图像或延迟加载的脚本）加载。
语法
在诸如 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 # delay-the-load-event |
浏览器兼容性
加载中…
另见
- Document readyState API
- 相关事件