> Faqs > Equivalente evento ready de jQuery en Javascript

Equivalente evento ready de jQuery en Javascript

Una pequeña consulta. Quisiera saber el equivalente del evento ready de jQuery pero en Javascript nativo.

Generalmente en jQuery hacemos esto para poder ejecutar acciones de manipulación del DOM:

$( document ).ready( function() {
    // Mi código de inicialización
} )

Quisiera hacer un comportamiento similar con Javascript para ejecutar instrucciones de inicialización, pero sin depender de jQuery.

Respuestas

El evento ready de jQuery no espera que la página entera haya cargado. Solo espera que todo el DOM haya sido generado en la memoria de Javascript y por lo tanto esté disponible para recibir instrucciones de manipulación.

El evento equivalente en Vanilla Javascript (Javascript nativo) es DOMContentLoaded.

Te pongo un ejemplo de uso para que quede claro.

document.addEventListener("DOMContentLoaded", function(event) {
    //código a ejecutar cuando existe la certeza de que el DOM está listo para recibir acciones
});

Diferencia del evento load y el evento DOMContentLoaded

El evento load (o onload) que también existe en Javascript no es tan optimizado. Es similar a DOMContentLoaded, pero no sería exactamente lo mismo.

En concreto onload sobre el objeto document se dispara cuando todos los elementos de la página han terminado de cargarse. Es decir, espera a que todas las imágenes se hayan descargado, scripts, banners, iframes... Por tanto, DOMContentLoaded se suele ejecutar antes, ya que el DOM puede procesarse muy rápido y algunas imágenes pesadas tarden un poco en cargar, por ejemplo.

Por tanto, si buscamos un equivalente a ready de jQuery, es más certero decir que es DOMContentLoaded.

Diferencia de DOMContentLoaded con respecto a ready de jQuery

No obstante, para ser muy exactos es importante mencionar que DOMContentLoaded no es exactamente igual a ready de jQuery. La diferencia es sutil, pero puede llegar a ser importante.

Básicamente, cualquier manejador del evento ready() de jQuery siempre se ejecutará, independientemente de que se haya cargado anteriormente el DOM.

Pongámonos en un supueto. En tiempo de ejecución, cuando ya el DOM está listo, decidimos asociar un nuevo manejador de evento DOMContentLoaded al documento. Ese manejador nunca se ejecutaría, porque el momento en el que el DOM ya se encuentra listo habría pasado ya. Sin embargo, cualquier código asociado mediante el método ready() de jQuery siempre se ejecutará, incluso aunque el DOM ya se encontrase listo con anterioridad.

Miguel Angel
3053 138 204 16

Saludos!, El equivalente seria " window.onload()", el cual se ejecuta cuando detecta que todo el DOM esta ya cargado.

Jean
5 1
onload podría servir, pero es más optimizado usar DOMContentLoaded, porque así no tienes que esperar que cargue toda la página, tan solo tiene que interpretarse el árbol de etiquetas.