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.

js
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 :

js
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 :

js
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>

JavaScript

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

Résultat

must be provided

Spécifications

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

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
load event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi