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().
Suscríbete. Déjanos tu email y recibe contenido genial cada mes
Entradas Relacionadas

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?