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 de l'interface Window est déclenché lorsque la page et toutes ses ressources dépendantes (telles que des feuilles de style, des scripts (y compris les scripts asynchrones, différés et les modules), des cadres intégrés et des images) sont complètement chargées, à l'exception de celles qui sont chargées paresseusement.
Cela contraste avec DOMContentLoaded, qui est déclenché dès que le DOM de la page est chargé, sans attendre la fin du chargement des ressources.
Cet événement n'est pas annulable et ne se propage pas.
Note :
Tous les évènements nommés load ne se propageront pas vers Window, même si bubbles est initialisé à true. Pour intercepter les évènements load sur la window, cet évènement load doit être dispatché directement vers la window.
Note :
L'évènement load qui est dispatché lorsque le document principal est chargé est dispatché sur la window, mais possède deux propriétés modifiées : target est document, et path est undefined. Ces deux propriétés sont modifiées pour des raisons de compatibilité avec les versions précédentes.
Pour éviter d'exécuter un script avant que le DOM qu'il manipule soit entièrement construit, vous pouvez placer le script à la fin du corps du document, juste avant la balise de fermeture </body>, sans l'envelopper dans un écouteur d'événement. Vous ne devriez généralement utiliser l'événement load que pour attendre le chargement des ressources externes, telles que les images ou les scripts différés.
Syntaxe
Utilisez cet évènement dans des méthodes telles que addEventListener(), ou définissez un gestionnaire d'évènement.
addEventListener("load", (event) => { })
onload = (event) => { }
Type d'évènement
Un objet 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.onload = (event) => {
console.log("La page est complètement chargée");
};
Exemple en direct
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
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
- L'API Document
readyState - Évènements associés :