Window : évènement load
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.
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 :
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 live
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 Standard # delay-the-load-event |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Évènements liés :