$(document).ready sin jQuery: alternativas modernas en 2025

¿Por qué en 2025 debería abandonar jQuery para $(document).ready?

Si todavía está escribiendo $(document).ready(function() { ... }) — o está trabajando con un proyecto heredado, o se está perdiendo las capacidades del JavaScript moderno. En 2025, jQuery es como un teléfono con botones: funciona, pero todos ya se han pasado a las pantallas táctiles.

En Stack Overflow, la pregunta $(document).ready equivalent without jQuery ha acumulado cientos de miles de visitas. Esto significa que desarrolladores de todo el mundo buscan formas ligeras, rápidas y modernas de ejecutar código después de la carga del DOM. Y la respuesta es simple: el soporte nativo de los navegadores ya cubre el 100% de las necesidades que jQuery solucionaba en su momento.

En este artículo, analizaremos 3 formas óptimas de reemplazar $(document).ready con JavaScript puro, discutiremos los matices de rendimiento y mostraremos ejemplos de código reales que podrá usar hoy mismo.

DOMContentLoaded — el protagonista sin jQuery

El análogo más directo de $(document).ready es el evento DOMContentLoaded. Se dispara cuando el navegador ha cargado y analizado completamente el documento HTML, pero antes de cargar imágenes, estilos y otros recursos. Esto es exactamente lo que jQuery hacía internamente.

Así es la sintaxis básica:

document.addEventListener('DOMContentLoaded', function() {\n    // Su código se ejecutará después de la carga completa del DOM\n    console.log('¡DOM completamente cargado y listo para usar!');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

¿Por qué es mejor que jQuery?

\n
• Velocidad: No necesita cargar 30+ KB de una biblioteca para una sola función.
\n
• Control: Sabe exactamente qué sucede en el momento de la carga.
\n
• Compatibilidad: Funciona en todos los navegadores modernos (IE9+, Chrome, Firefox, Safari, Edge).
\n

Pero hay un detalle: si su script se incluye después de la carga del DOM, el evento ya no se disparará. La solución es verificar document.readyState:

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // DOM ya está cargado\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('Se ejecutará garantizadamente después de la carga del DOM');\n});

Este patrón es el estándar de oro para reemplazar $(document).ready en 2025.

El atributo defer: la forma más sencilla sin una sola línea de código

¿Y si le digo que ni siquiera necesita escribir DOMContentLoaded? El atributo defer en la etiqueta <script> hace todo el trabajo por usted:

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

¿Cómo funciona? El navegador carga el script en paralelo con el HTML, pero lo ejecuta solo después del análisis completo del documento. Esto equivale a que todo el código dentro de script.js esté automáticamente envuelto en $(document).ready.

Ventajas:

\n
• Cero código adicional — solo agregue el atributo.
\n
• Los scripts con defer se ejecutan en el orden en que aparecen en el HTML.
\n
• Funciona en el 97% de los navegadores (incluyendo versiones antiguas de Safari).
\n

¿Cuándo usarlo? Ideal para scripts normales que deben trabajar con el DOM, pero que no bloquean el renderizado. Por ejemplo:

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- app.js se ejecutará después de analytics.js, pero antes de window.onload -->

Compárelo con jQuery: $(document).ready dentro de app.js es código innecesario. Y con defer simplemente escribe:

// app.js — ni