Document ready vs. Window load en jQuery

JavaScript   |   3 Comentarios

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?

(5 votos, promedio: 4,20 sobre 5)

Loading...

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