Comment exécuter des fonctions JavaScript lorsqu'une page est entièrement chargée, y compris les images ?

Exécuter des fonctions JavaScript lorsqu'une page est entièrement chargée

Question :

Comment puis-je déclencher l'exécution d'une fonction JavaScript uniquement une fois que tous les éléments d'une page, y compris les images, ont fini de se charger ?

Réponse :

La solution réside dans l'utilisation de l'événement de chargement. Contrairement à l'événement DOMContentLoaded, qui se produit lorsque le document HTML a été analysé et que l'arborescence DOM est prête, l'événement load attend que toutes les ressources, y compris les images, soient chargées. Cela le rend idéal pour exécuter du code lorsque la page entière est entièrement chargée.

Implémentation :

Pour exécuter une fonction lorsque la page est complètement chargée, vous pouvez utiliser le code suivant :

<code class="js">window.addEventListener('load', function () {
  // Your code here will run when the page is fully loaded
});</code>

Exemple :

Par exemple, si vous souhaitez afficher un message dans une boîte d'alerte lorsque la page est entièrement chargée, vous pouvez utiliser le code suivant :

<code class="js">window.addEventListener('load', function () {
  alert("It's loaded!");
});</code>

En utilisant l'événement load, vous vous assurez que votre code JavaScript n'est exécuté qu'une fois que tous les éléments de la page, y compris les images et autres ressources, ont terminé le chargement. Cela permet d'éviter les problèmes pouvant survenir en raison d'une exécution prématurée du code avant que la page ne soit complètement chargée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!