Comment déterminer la préparation au DOM sans frameworks ?

Comprendre l'état de préparation du DOM sans frameworks

Lors du développement d'applications Web, il est crucial de déterminer quand le modèle objet de document (DOM) est prêt à être manipulé. Alors que des frameworks comme jQuery offrent des auditeurs readyState, cet article explore des approches alternatives pour détecter la préparation au DOM.

Accès direct à l'état du DOM

Au lieu de vous fier aux frameworks, vous pouvez directement vérifiez la propriété readyState du document :

<code class="js">if (document.readyState === 'complete') {
  // DOM is ready
}</code>

Cependant, cette approche n'est pas fiable sur tous les navigateurs, car certains peuvent ne pas fournir une valeur readyState précise.

Vérification de préparation du DOM basée sur les événements

Une approche plus multi-navigateurs consiste à écouter l'événement DOMContentLoaded, qui se déclenche lorsque le DOM est prêt à être manipulé :

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

Exploiter la propriété isReady non documentée de jQuery

Bien que non documenté, jQuery expose une propriété isReady qui indique en interne l'état prêt du DOM :

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

Extrait léger de préparation du DOM

Inspiré par l'extrait de Dustin Diaz, vous pouvez créer un mini écouteur prêt pour le DOM comme suit :

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

Cette vérification exploite le fait que la valeur readyState contient "in" dans les états de chargement antérieurs, ce qui en fait un indicateur fiable de Préparation du DOM.

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!