> 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.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

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 el DOM está listo para recibir acciones
});

El evento load (o onload) que se ha mencionado no sería exactamente lo mismo, ya que tiene la diferencia con respecto a ready. En concreto onload 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.

Miguel Angel
296 18 17 1

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

Jean
0
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.