Comment détecter un événement DOM Ready en Javascript sans framework ?

Détection d'événements Javascript DOM Ready sans frameworks

En Javascript, les développeurs s'appuient souvent sur des frameworks comme Prototype ou jQuery pour attacher des fonctions à l'événement window.onload afin d'effectuer certaines tâches . Cependant, il existe d'autres moyens d'y parvenir sans utiliser ces frameworks.

L'objet document en Javascript possède une propriété readyState qui indique l'étape de chargement de la page, similaire à la propriété readyState des requêtes AJAX. La propriété readyState peut avoir les valeurs suivantes :

• loading - La page est toujours en cours de chargement et les éléments DOM ne sont pas encore disponibles.
• interactive - La page est chargée et les éléments DOM sont pour la plupart prêt pour l'interaction, mais les images et autres ressources peuvent encore être en cours de chargement.
• complet - La page est entièrement chargée et tous les éléments du DOM sont disponibles.

Pour détecter quand le DOM est prêt , vous pouvez utiliser le code suivant :

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

Ce code vérifie si la page est déjà entièrement chargée (readyState est 'complete') et exécute la fonction fireOnReady immédiatement. Sinon, il attache un rappel à l'événement DOMContentLoaded, qui se déclenche lorsque le DOM est prêt, et exécute la fonction fireOnReady.

Une autre option consiste à utiliser la propriété isReady non documentée de jQuery :

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

Cependant, cette propriété n'est pas documentée et pourrait être supprimée dans les futures versions de jQuery.

En fin de compte, écouter l'événement DOMContentLoaded est le moyen le plus fiable de détecter quand le DOM est prêt dans les navigateurs modernes.

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!