Document.isReady: uma solução nativa para detecção pronta para DOM

A dependência de estruturas como Prototype e jQuery para gerenciar eventos window.onload pode não sempre será desejável. Este artigo explora métodos alternativos para determinar a prontidão do DOM, especialmente por meio do uso de document.isReady.

Consultando Document.isReady

Para navegadores modernos com APIs de eventos estáveis, o O evento DOMContentLoaded fornece um método robusto para lidar com eventos prontos para DOM. Implementações como as seguintes oferecem uma solução simples e eficiente:

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

a propriedade $.isReady do jQuery

jQuery oferece uma propriedade não documentada, $.isReady, que reflete o estado pronto do DOM internamente. A utilização desta propriedade permite verificações concisas:

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

É crucial observar que esta propriedade permanece não documentada e sua disponibilidade em versões futuras do jQuery não pode ser garantida. Use-o com cuidado e esteja preparado para possíveis alterações após atualizações.

Um snippet pronto para DOM personalizado

Para maior compatibilidade do navegador, um snippet pronto para DOM personalizado pode ser empregado. Inspirado na abordagem de Dustin Diaz, ele verifica document.readyState usando uma expressão regular:

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

Este método depende do fato de que a substring "in" está presente nos estados "carregamento" e "interativo" pronto, mas não no estado "completo".