Window: load event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

load 事件被激发当整个页面已加载，包括所有从属资源 (如：样式表和图像)。这相比 DOMContentLoaded ，一旦页面 DOM 被加载就会被激发，无需等待资源完成加载。

冒泡	No
可取消	No
接口	`事件`
事件处理程序特性	`onload`

范例

日志消息当页面被完全加载时：

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

一样，但使用 onload 事件处理程序特性：

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

实时范例

HTML

<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>

CSS

body {
  display: grid;
  grid-template-areas: "control  log";
}
.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-log {
  grid-area: log;
}
.event-log-contents {
  resize: none;
}
label, button {
  display: block;
}
#reload {
  height: 2rem;
}

JS

const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');
reload.addEventListener('click', () => {
  log.textContent ='';
  window.setTimeout(() => {
      window.location.reload(true);
  }, 200);
});
window.addEventListener('load', (event) => {
    log.textContent = log.textContent + 'load\n';
});
document.addEventListener('readystatechange', (event) => {
    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener('DOMContentLoaded', (event) => {
    log.textContent = log.textContent + `DOMContentLoaded\n`;
});

结果

规范

规范	状态	注释
UI Events 在该规范中的 load 定义。	工作草案
HTML 实时标准在该规范中的 load event 定义。	实时标准	This links to the section in the steps that are carried out at the end of loading a document. 'load' events are fired at many elements too. And note there are many places in the specification that refer to things that can " 延迟加载事件 ".

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`load` event	Chrome 1	Edge 12	Firefox 1	IE 4	Opera 4	Safari 1.3	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

另请参阅

相关事件： DOMContentLoaded , readystatechange , beforeunload , unload

元数据

最后修改： Apr 15, 2020

在此页

范例

实时范例

HTML

CSS

JS

结果

规范

浏览器兼容性

图例

另请参阅

相关话题