Document.isReady: una solución nativa para la detección de DOM Ready

Es posible que no dependa de marcos como Prototype y jQuery para administrar eventos de window.onload ser siempre deseable. Este artículo explora métodos alternativos para determinar la preparación de DOM, particularmente mediante el uso de document.isReady.

Consulta de Document.isReady

Para navegadores modernos con API de eventos estables, el El evento DOMContentLoaded proporciona un método sólido para manejar eventos listos para DOM. Implementaciones como las siguientes ofrecen una solución simple y eficiente:

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

Propiedad $.isReady de jQuery

jQuery ofrece una propiedad no documentada, $.isReady, que refleja internamente el estado listo para DOM. La utilización de esta propiedad permite realizar comprobaciones concisas:

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

Es fundamental tener en cuenta que esta propiedad permanece sin documentar y no se puede garantizar su disponibilidad en futuras versiones de jQuery. Úselo con precaución y esté preparado para posibles cambios tras las actualizaciones.

Un fragmento personalizado listo para DOM

Para una mayor compatibilidad del navegador, se puede emplear un fragmento personalizado listo para DOM. Inspirado en el enfoque de Dustin Diaz, verifica document.readyState usando una expresión regular:

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

Este método se basa en el hecho de que la subcadena "en" está presente en los estados listos "cargando" e "interactivo", pero no en el estado "completo".