Window : évènement load

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 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) => {});

 => {};

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. => {
  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 # delay-the-load-event

Compatibilité des navigateurs

Voir aussi

Évènements liés :

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨15 août 2023⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content