Window : évènement load

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'évènement load est déclenché lorsque la page et toutes ses ressources dépendantes (telles que des feuilles de style et des images) sont complètement chargées. Cela contraste avec DOMContentLoaded, qui est déclenché lorsque le DOM de la page est chargé sans attendre la fin du chargement des ressources.

Cet évènement n'est pas annulable et ne bouillonne pas.

Syntaxe

Utilisez cet évènement dans des méthodes telles que addEventListener(), ou définissez un gestionnaire d'évènement.

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

onload = (event) => {};

Type d'évènement

Un Event générique.

Exemples

Le code suivant affiche un message dans la console lorsque que la page est complètement chargée :

window.addEventListener("load", (event) => {
  console.log("La page est complètement chargée");
});

Voici un exemple similaire qui utilise un gestionnaire d'évènement onload :

window.onload = (event) => {
  console.log("La page est complètement chargée");
};

Exemple live

HTML

html

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

<div class="event-log">
  <label for="eventLog">Journal d'évènements :</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;
}

JavaScript

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`;
});

Résultat

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Évènements liés :