HTML onload et JavaScript : fonctionnement et exemples

Publié le 21 octobre 2026 · Mis à jour le 21 octobre 2026

L’événement load indique que la page et ses ressources dépendantes ont fini de se charger. On peut le gérer avec l’attribut HTML onload, la propriété JavaScript window.onload ou, de préférence, addEventListener('load', ...). Ces trois écritures ne sont pas équivalentes lorsqu’un projet comporte plusieurs scripts.

Exemple minimal avec addEventListener

window.addEventListener('load', () => {
  console.log('La page et ses ressources sont chargées');
});

Cette forme ajoute un écouteur sans remplacer ceux déjà installés. Elle convient mieux aux applications composées de plusieurs modules, car plusieurs fonctions peuvent écouter le même événement.

Utiliser l’attribut HTML onload

<body onload="initialiserPage()">
  ...
  <script>
    function initialiserPage() {
      console.log('Page prête');
    }
  </script>
</body>

Cette syntaxe fonctionne, mais mélange le comportement JavaScript et le balisage. Elle devient vite difficile à maintenir et ne facilite pas une politique de sécurité du contenu stricte. Dans un projet moderne, gardez le HTML pour la structure et attachez les écouteurs depuis un fichier JavaScript.

window.onload : simple, mais facile à écraser

window.onload = function () {
  initialiserPage();
};

La propriété ne stocke qu’un gestionnaire à la fois. Si un autre script assigne ensuite une nouvelle fonction à window.onload, la précédente est remplacée :

window.onload = fonctionA;
window.onload = fonctionB; // fonctionA ne sera plus appelée

Avec addEventListener, les deux écouteurs peuvent coexister :

window.addEventListener('load', fonctionA);
window.addEventListener('load', fonctionB);

load ou DOMContentLoaded : lequel choisir ?

DOMContentLoaded se déclenche lorsque le document HTML a été analysé et que le DOM est construit. Il n’attend pas nécessairement le chargement complet des images, feuilles de style et autres ressources. load, lui, intervient plus tard, lorsque la page et ses ressources dépendantes sont chargées.

Choisissez DOMContentLoaded pour initialiser des boutons, menus ou formulaires dès que leur HTML existe :

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#menu').classList.add('pret');
});

Choisissez load lorsque le calcul dépend de la taille finale d’images ou d’autres ressources :

window.addEventListener('load', () => {
  const image = document.querySelector('img.hero');
  console.log(image.naturalWidth, image.naturalHeight);
});

L’événement load d’une image

Les éléments comme img peuvent émettre leur propre événement :

const image = document.querySelector('#aperçu');

image.addEventListener('load', () => {
  console.log('Image chargée');
});

image.addEventListener('error', () => {
  console.error('Impossible de charger l’image');
});

Attachez les écouteurs avant de modifier l’attribut src, sinon une ressource disponible immédiatement dans le cache pourrait être prête avant l’enregistrement de votre fonction.

Un script placé en fin de body a-t-il besoin de onload ?

Souvent, non. Un script classique placé juste avant </body> voit généralement les éléments déclarés avant lui. Les scripts chargés avec defer s’exécutent après l’analyse du document et avant DOMContentLoaded, dans l’ordre où ils apparaissent. Cela évite de retarder inutilement l’interface jusqu’au chargement de toutes les images.

<script src="app.js" defer></script>

Éviter le piège d’un écouteur installé trop tard

Dans une application qui charge du code dynamiquement, l’événement peut déjà avoir eu lieu. Contrôlez alors document.readyState :

function demarrer() {
  console.log('Initialisation');
}

if (document.readyState === 'complete') {
  demarrer();
} else {
  window.addEventListener('load', demarrer, { once: true });
}

L’option once: true retire automatiquement l’écouteur après son premier appel.

Les erreurs les plus fréquentes

• Écrire window.onload = fonction() : les parenthèses exécutent immédiatement la fonction et assignent son résultat.
• Écraser un gestionnaire avec une seconde affectation à window.onload.
• Attendre load pour une interaction qui pourrait être prête à DOMContentLoaded.
• Attacher l’écouteur après avoir défini la source d’une image.
• Utiliser du JavaScript en ligne bloqué par la politique CSP du site.

Sources vérifiées

• MDN : événement load de Window
• MDN : DOMContentLoaded
• MDN : addEventListener
• MDN : élément script et attribut defer