$(document).ready sans jQuery : alternatives modernes en 2025

Pourquoi en 2025 faut-il abandonner jQuery pour $(document).ready ?

Si vous écrivez encore $(document).ready(function() { ... }) — vous travaillez soit sur un projet legacy, soit vous passez à côté des possibilités du JavaScript moderne. En 2025, jQuery c'est comme un téléphone à touches : ça fonctionne, mais tout le monde est déjà passé aux écrans tactiles.

Sur Stack Overflow, la question $(document).ready equivalent without jQuery a recueilli des centaines de milliers de vues. Cela signifie que les développeurs du monde entier recherchent des moyens légers, rapides et modernes d'exécuter du code après le chargement du DOM. Et la réponse est simple : le support natif des navigateurs couvre déjà 100 % des besoins que jQuery résolvait autrefois.

Dans cet article, nous allons analyser 3 meilleures méthodes pour remplacer $(document).ready par du JavaScript pur, discuter des nuances de performance et montrer des exemples de code réels que vous pourrez utiliser dès aujourd'hui.

DOMContentLoaded — le héros principal sans jQuery

L'équivalent le plus direct de $(document).ready est l'événement DOMContentLoaded. Il se déclenche lorsque le navigateur a complètement chargé et analysé le document HTML, mais avant le chargement des images, des styles et autres ressources. C'est exactement ce que faisait jQuery sous le capot.

Voici à quoi ressemble la syntaxe de base :

document.addEventListener('DOMContentLoaded', function() {\n    // Votre code s'exécutera après le chargement complet du DOM\n    console.log('DOM complètement chargé et prêt !');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

Pourquoi est-ce mieux que jQuery ?

\n
• Vitesse : Pas besoin de charger 30+ Ko de bibliothèque pour une seule fonction.
\n
• Contrôle : Vous savez exactement ce qui se passe au moment du chargement.
\n
• Compatibilité : Fonctionne dans tous les navigateurs modernes (IE9+, Chrome, Firefox, Safari, Edge).
\n

Mais il y a un détail : si votre script est chargé après le chargement du DOM, l'événement ne se déclenchera pas. Solution — vérification de document.readyState :

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // DOM déjà chargé\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('S'exécutera garanti après le chargement du DOM');\n});

Ce modèle est le standard en or pour remplacer $(document).ready en 2025.

L'attribut defer : la méthode la plus simple sans une seule ligne de code

Et si je vous disais qu'on peut même ne pas écrire DOMContentLoaded ? L'attribut defer dans la balise <script> fait tout le travail pour vous :

<script src="script.js" defer></script>

Comment ça marche ? Le navigateur charge le script en parallèle avec le HTML, mais ne l'exécute qu'après l'analyse complète du document. Cela équivaut à ce que tout le code à l'intérieur de script.js soit automatiquement enveloppé dans $(document).ready.

Avantages :

\n
• Zéro code supplémentaire — ajoutez simplement l'attribut.
\n
• Les scripts avec defer s'exécutent dans l'ordre de leur apparition dans le HTML.
\n
• Fonctionne dans 97 % des navigateurs (y compris les anciennes versions de Safari).
\n

Quand l'utiliser ? Idéal pour les scripts classiques qui doivent interagir avec le DOM sans bloquer le rendu. Par exemple :

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- app.js s'exécutera après analytics.js, mais avant window.onload -->

Comparez avec jQuery : $(document).ready à l'intérieur de app.js — c'est du code superflu. Avec defer, vous écrivez simplement :

// app.js — ni