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.