Quand le DOM est-il prêt en JavaScript ?

Comprendre l'état de préparation du DOM en JavaScript

Lorsque vous travaillez avec des pages Web dynamiques, comprendre l'état de préparation du DOM est crucial pour exécuter les tâches au moment approprié. Bien que des frameworks tels que Prototype et jQuery fournissent des mécanismes pratiques pour attacher des fonctions à l'événement window.onload, il existe des situations dans lesquelles une approche plus directe est souhaitée.

Interrogation de la préparation au DOM

Si vous cherchez une alternative à l'utilisation de frameworks, vous pouvez explorer quelques méthodes :

1. Propriété "isReady" non documentée de jQuery :

Bien qu'il ne soit pas documenté, jQuery conserve une propriété interne appelée isReady. Lorsqu'il est accessible, il indique si l'événement DOM ready s'est déclenché :

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

Bien que cette approche ait été stable sur plusieurs versions de jQuery, elle reste non documentée et doit être utilisée avec prudence.

2. Document ReadyState :

L'objet document propose une propriété readyState qui reflète l'état de chargement de la page :

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

En écoutant l'événement DOMContentLoaded, vous pouvez exécuter du code lorsque le la page est entièrement chargée.

3. Vérification prête pour le DOM personnalisée :

Pour les scénarios où la compatibilité du navigateur est primordiale, vous pouvez créer une vérification prête pour le DOM personnalisée inspirée de l'extrait de Dustin Diaz :

<code class="javascript">if (!/in/.test(document.readyState)) {
  // document is ready
} else {
  // document is NOT ready
}</code>

Cette approche exploite le fait que les états de chargement "loading" et "interactive" contiennent la chaîne "in" dans leur propriété readyState. En conséquence, si "in" est trouvé dans le readyState, le document 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!