03Nov 2011 8 Comments */?>

Diferencia entre $(document).ready y $(window).load en jQuery

Categorías: JQuery, Tutoriales - Tags: ,

Hoy les voy a explicar la principal diferencia entre $(document).ready y $(window).load , funciones esenciales a la hora de usar jQuery en tus programas.

1
2
3
$(document).ready(function(){
//todo el código
});

El código que ven más arriba se suele usar la mayoría del tiempo y en casi todos lados lo mencionan como la mejor manera de ejecutar nuestro código después del que el DOM esta listo.

Entonces para que se necesita $(window).load() ?

Yo hasta ahora lo he utilizado para trabajar con imágenes. Cuando se necesita manipular imágenes para por ejemplo alinearlas o se necesita obtener el width y height de las mismas necesitaremos sí o sí utilizar $(window).load().
Con $(document).ready() no podrás hacer eso si el usuario no tiene cargadas las imágenes en la cache o en otras palabras tu código siempre fallaría con nuevos usuarios.

A diferencia de este último $(window).load() ejecutará el código una vez hayan cargado todas las imágenes. A simple vista no se observa diferencia ninguna en cuanto a tiempo, pero si alguna vez tuvieron que manipular imágenes cuando carga una página sabrán a que me refiero.

1
2
3
$(window).load(function(){
// Código ejecutado después de que se carguen la imágenes.
});

Saludos!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Lucas

    Muy buen ejemplo, ahora mismo me a ocurrido

  • Nicolas !

    Graciassss, con razon no me terminaba de cargar las imágenes y se veia todo cartado !!
    Me salvaste las papas !!
    Grosooo aporte !

  • Tengolavergalarga

    Hola huevon de mierda, esta es una web muy de muy cagada

  • Tengolavergalarga

    quiero culearmela y chingarmela a una culona 

  • Pingback: Diferencia entre $(document).ready y $(window).load en jQuery | Chucherías()

  • vivadamianlogghe

    Damián Logghe, programador freelancer, emprendedor de sueños y plagiador de contenidos en Internet. El artículo es “casi” idéntico del original en inglés, y no haces una mención a la fuente por ninguna parte… no me voy a parar a revisar tu página pero ya intuyo que harás lo mismo en muchos de ellos.

    Agur!!

    • La verdad que no recuerdo el original, pero seguramente es muy parecido a este ya que hablamos de lo mismo. Y si, seguramente encontraras un montón más de artículos a los cuales no les puse la fuente, simplemente pq no lo recordé o porque escribí el artículo con prisas. Acaso crees que este blog lo hago para generar dinero ? No, lo tengo como fuente personal de consulta y para ayudar a quien lo necesite. Acaso crees que traducir y explicar con tus palabras no lleva trabajo?
      Lo que no ayudan son los comentarios tuyos que no llegan a ninguna parte. Lo que tendrías que haber echo es pegar al menos el link de la fuente en lugar de solo criticar 
      Y de paso te invito a revisar todo el sitio y pegar los links de las fuentes que faltan ya que yo no tengo tiempo para hacerlo. Saludos y espero que encuentres algún artículo que te ayude.

      Dew!!

  • Tenía la siguiente duda: “¿Con quién se cargan el DOM e IMÁGENES? ¿con windows.load o con document.ready?, he intentado y con windows.load he visto que se cargan primero todos los elementos del documento, ya sea imágenes, video, archivos semi-pesados, etc, con document.ready he visto que solo se carga el DOM, ¡Que tan cierto es esto que menciono?”, pero ahora leyendo esto concuerdo con Damián, con windows.load se carga el DOM + Imágenes, cuando con el document.ready se carga solo el DOM, si alguien tiene argumentos mejores para debatir por favor comenten, estoy ansioso de sacar esta duda, pero por lo que he probado así es la síntesis de estos dos objetos.