Comment garantir l'exécution de JavaScript après le chargement complet de la page ?-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment garantir l'exécution de JavaScript après le chargement complet de la page ?

Dec 20, 2024 pm 12:58 PM

How to Ensure JavaScript Executes After the Page Fully Loads?

Comment exécuter JavaScript après le chargement de la page

Exécuter des scripts externes dans le répertoire <head> de votre page HTML peut poser des problèmes lorsque vous tentez d'accéder aux éléments du <body>. Cela se produit car le script s'exécute avant le chargement complet de la page. Pour résoudre ce problème, envisagez les solutions suivantes :

attribut defer :

Ajoutez l'attribut defer au <script> tag :

&lt;script src=&quot;deferMe.js&quot; defer&gt;&lt;/script&gt;

Copier après la connexion

Avec cet attribut, le script s'exécutera juste avant que la page finisse d'analyser le DOM.

Événement Body onload :

Incluez le gestionnaire d'événements onload dans le fichier <body> tag :

&lt;body onload=&quot;script();&quot;&gt;

Copier après la connexion

Cet événement déclenchera l'exécution de la fonction script() une fois le chargement de la page terminé.

Événement DOMContentLoaded :

Utilisez l'événement DOMContentLoaded, qui est pris en charge par la plupart des navigateurs :

document.addEventListener("DOMContentLoaded", function() {
  // Your script
});

Copier après la connexion

Cet événement est déclenché lorsque le DOM est entièrement chargé, mais avant que le rendu des images et des styles soit terminé.

Événement window.onload :

Vous pouvez également utiliser l'événement window.onload :

window.onload = function() {
  // Your script
};

Copier après la connexion

Cet événement est considéré comme plus standard que document.onload et est largement pris en charge dans navigateurs.

Solutions discrètes :

Pour une approche non intrusive, envisagez d'utiliser l'attribut defer ou le gestionnaire d'événements window.onload. Ces méthodes exécuteront votre script après le chargement de la page, garantissant ainsi que vous pouvez accéder aux éléments pertinents de votre script.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn