HTMLElement : é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 de l'interface HTMLElement est déclenché pour les éléments contenant une ressource lorsque celle‑ci a été chargée avec succès. Actuellement, la liste des éléments HTML pris en charge sont : <body>, <embed>, <iframe>, <img>, <link>, <object>, <script>, <style> et <track>.

Note : L'évènement load sur HTMLBodyElement est en réalité un alias pour l'évènement window.onload. Ainsi, l'évènement load ne sera déclenché sur l'élément <body> qu'une fois que toutes les ressources du document auront été chargées ou auront échoué. Cependant, pour plus de clarté, il est recommandé d'attacher le gestionnaire d'évènement directement à l'objet window plutôt qu'à HTMLBodyElement.

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

Syntaxe

On utilisera le nom de l'évènement dans des méthodes telles que addEventListener(), ou on définira une propriété gestionnaire d'évènements.

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

onload = (event) => { }

<img
  id="image"
  src="/shared-assets/images/examples/favicon144.png"
  alt="Logo MDN"
  width="72" />
<div><button>Recharger</button></div>

JavaScript

const image = document.getElementById("image");
image.onload = () => {
  document.body.appendChild(document.createElement("div")).textContent =
    "Chargée !";
};

document.querySelector("button").addEventListener("click", reload);

function reload() {
  image.src = "/shared-assets/images/examples/favicon144.png";
}