Comment puis-je déterminer l’état de préparation du DOM sans m’appuyer sur des frameworks ?

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 grâce à 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 :

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

Propriété $.isReady de jQuery

jQuery propose une propriété non documentée, $.isReady, qui reflète le État prêt pour le DOM en interne. L'utilisation de cette propriété permet des contrôles concis :

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

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ée de l'approche de Dustin Diaz, elle vérifie le document.readyState à l'aide d'une expression régulière :

<code class="javascript">if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}</code>

Cette méthode repose sur le fait que la sous-chaîne "in" est présente dans les champs "loading" et "interactive" ready états mais pas à l'état "complet".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!