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 :

if (document.readyState === 'complete') {
  // DOM is ready
}

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 disponibilité 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 pour manipulation :

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

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 :

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

Extrait léger prêt pour DOM

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

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

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 la préparation du DOM.