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 Star2 Stars3 Stars4 Stars5 Stars (1 votos, promedio: 5,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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?