Document ready vs. Window load en jQuery

A menudo vamos a necesitar saber cuando se ha cargado nuestro contenido completamente para comenzar con las animaciones y demás cargas dentro de nuestro sitio, para ello jQuery nos ofrece la posibilidad de controlar la carga de nuestra web mediante dos eventos:

$(window).load(function(){
  alert('Window load');
});

$(document).ready(function(){
  alert('Document ready');
});

Ambos eventos se ejecutan cuando la web se ha cargado, la única diferencia radica en los elementos que están disponibles cuando se ejecuta su código. En el caso de Document ready, se ejecuta cuando se ha cargado el código HTML y el DOM está listo. Pero ¿qué pasa si lo que queremos controlar es un frame, una imagen o algún tipo de objeto? Pues que debemos echar mano de Window load, ya que este evento se ejecuta cuando todos los elementos que conforman la web se han cargado por completo.

Conclusión, si vamos a trabajar con los elementos que componen la web (divs, inputs, …) usaremos la sentencia $(document).ready(). Pero, si por el contrario, vamos a trabajar con imágenes para alinearlas o comprobar sus dimensiones tendremos que usar $(window).load().

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 4,20 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.

3 Comentarios

Fco

Gracias... Me Ha Servido de Mucho.

Javier Bolaños Autor

Hola Diego, Gracias por la apreciación, ya está corregido. Nos alegramos de que te haya sido útil la información. Un saludo.

Diego

Gracias por explicar la diferencia. Sólo comentar quehas cometido un pequeño error donde dice: "Pues que debemos echar mano de Window ready [...]" será "Window load" ¿no?