Maison  >  Article  >  interface Web  >  Existe-t-il un autre moyen de vérifier la préparation du DOM en Javascript sans utiliser de frameworks ?

Existe-t-il un autre moyen de vérifier la préparation du DOM en Javascript sans utiliser de frameworks ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-20 10:23:30989parcourir

Is There an Alternative Way to Check for DOM Readiness in Javascript Without Using Frameworks?

Détermination de l'état de préparation d'un document en Javascript

Question :

Existe-t-il un autre moyen de vérifier pour la préparation au DOM en Javascript, sans s'appuyer sur des frameworks comme prototype ou jQuery ?

Réponse :

Option 1 : Événement DOMContentLoaded

L'événement DOMContentLoaded se déclenche lorsque le document HTML initial a été analysé et que le DOM est prêt à être manipulé. Pour utiliser cet événement :

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

Notez que cet événement ne se déclenche qu'une seule fois lors du chargement de la page.

Option 2 : propriété isReady de jQuery (non documentée)

jQuery possède une propriété non documentée appelée isReady qui peut être utilisée pour vérifier l'état de préparation du DOM :

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

Bien que cette propriété soit fiable, elle ne l'est pas officiellement documenté et pourra être supprimé dans les futures versions de jQuery.

Option 3 : vérification ReadyState personnalisée

Inspiré par Dustin Diaz, vous pouvez créer un extrait de code personnalisé prêt pour le DOM qui vérifie la propriété document.readyState :

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

Cela fonctionne car la propriété document.readyState passe par trois états de chargement : "chargement", "interactif" et "complet". "Loading" et "interactive" contiennent tous deux le texte "in", indiquant que le DOM n'est pas encore prêt.

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:
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