Comprender la preparación de DOM sin marcos

Al desarrollar aplicaciones web, determinar cuándo el modelo de objetos de documento (DOM) está listo para la manipulación es crucial. Si bien marcos como jQuery ofrecen oyentes readyState, este artículo explora enfoques alternativos para detectar la preparación de DOM.

Acceso directo al estado DOM

En lugar de depender de marcos, puede directamente verifique la propiedad readyState del documento:

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

Sin embargo, este enfoque no es confiable en todos los navegadores, ya que algunos pueden no proporcionar un valor readyState preciso.

Comprobación de preparación de DOM basada en eventos

Un enfoque más entre navegadores es escuchar el evento DOMContentLoaded, que se activa cuando el DOM está listo para manipulación:

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

Aprovechando la propiedad isReady no documentada de jQuery

Aunque no está documentada, jQuery expone una propiedad isReady que indica internamente el estado listo del DOM:

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

Fragmento ligero listo para DOM

Inspirado en el fragmento de Dustin Diaz, puedes crear un mini oyente listo para DOM de la siguiente manera:

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

Esta verificación aprovecha el hecho de que el valor readyState contiene "in" en estados de carga anteriores, lo que lo convierte en un indicador confiable de la preparación de DOM.