¿Cuáles son las diferencias entre el método window.onload
de JavaScript y el método $(document).ready()
de jQuery?
El evento ready
se produce después de que se haya cargado el documento HTML, mientras que el evento onload
se produce más tarde, cuando todo el contenido (por ejemplo, las imágenes) también se ha cargado.
El evento onload
es un evento estándar en el DOM, mientras que el evento ready
es específico de jQuery. El propósito del evento ready
es que se produzca lo antes posible después de que se haya cargado el documento, para que el código que añade funcionalidad a los elementos de la página no tenga que esperar a que se cargue todo el contenido.
window.onload
es el evento de JavaScript incorporado, pero como su implementación tenía sutiles peculiaridades en los navegadores (Firefox, Internet Explorer 6, Internet Explorer 8, y Opera), jQuery proporciona document.ready
, que abstrae esos eventos, y se dispara tan pronto como el DOM de la página está listo (no espera a las imágenes, etc.).
$(document).ready
(nótese que no es document.ready
, que es indefinido) es una función de jQuery, que envuelve y proporciona consistencia a los siguientes eventos:
document.ondomcontentready
/ document.ondomcontentloaded
- un nuevo evento que se dispara cuando se carga el DOM del documento (que puede ser algún tiempo antes de que se carguen las imágenes, etc.); de nuevo, ligeramente diferente en Internet Explorer y en el resto del mundowindow.onload
(que se implementa incluso en navegadores antiguos), que se dispara cuando se carga toda la página (imágenes, estilos, etc.)Unas palabras de precaución sobre el uso de $(document).ready()
con Internet Explorer. Si una petición HTTP se interrumpe antes de que se cargue todo el documento (por ejemplo, mientras una página se transmite al navegador, se hace clic en otro enlace) IE activará el evento $(document).ready
.
Si cualquier código dentro del evento $(document).ready()
hace referencia a objetos del DOM, existe la posibilidad de que esos objetos no se encuentren, y pueden producirse errores de Javascript. Proteja sus referencias a esos objetos, o difiera el código que hace referencia a esos objetos al evento window.load.
No he podido reproducir este problema en otros navegadores (específicamente, Chrome y Firefox)