Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener('load', (event) => {});

onload = (event) => { };

Event type

A generic Event.

Examples

Log a message when the page is fully loaded:

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

The same, but using the onload event handler property:

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

Live example

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>

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 += 'load\n';
});

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

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

Result

Specifications

Specification
UI Events # event-type-load
HTML Standard # delay-the-load-event

Browser compatibility

BCD tables only load in the browser