Document.isReady : une solution native pour la détection DOM Ready

La dépendance à l'égard de frameworks comme Prototype et jQuery pour la gestion des événements window.onload peut ne pas toujours être désirable. Cet article explore des méthodes alternatives pour déterminer l'état de préparation du DOM, notamment via l'utilisation de document.isReady.

Interrogation de Document.isReady

Pour les navigateurs modernes dotés d'API d'événements stables, le L'événement DOMContentLoaded fournit une méthode robuste pour gérer les événements prêts pour le DOM. Des implémentations comme celle-ci offrent une solution simple et efficace :

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

Propriété $.isReady de jQuery

jQuery propose une propriété non documentée, $.isReady, qui reflète l'état prêt du DOM en interne. L'utilisation de cette propriété permet des vérifications concises :

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

Il est crucial de noter que cette propriété reste non documentée et que sa disponibilité dans les futures versions de jQuery ne peut être garantie. Utilisez-le avec prudence et préparez-vous aux changements potentiels lors des mises à niveau.

Un extrait de code DOM personnalisé

Pour une compatibilité plus large avec les navigateurs, un extrait de code DOM personnalisé peut être utilisé. Inspiré de l'approche de Dustin Diaz, il vérifie le document.readyState à l'aide d'une expression régulière :

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

Cette méthode repose sur le fait que la sous-chaîne "in" est présente dans les états prêt "chargement" et "interactif" mais pas dans l'état "complet".