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ènementload 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 avecDOMContentLoaded, qui est déclenché lorsque leDOM 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 queaddEventListener(), ou définissez un gestionnaire d'évènement.

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

Type d'évènement

UnEvent 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ènementonload :

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

Exemplelive

HTML

html

<div>  <button type="button">Recharger</button></div><div>  <label for="eventLog">Journal d'évènements :</label>  <textarea    readonly       rows="8"    cols="30"   ></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`;});