1178 votos

window.onload vs $(document).listo()

¿Cuáles son las diferencias entre JavaScript window.onload y JQuery $(document).ready() método?

1180voto

Guffa Puntos 308133

La ready evento se produce después de que el documento HTML que ha sido cargado, mientras que el onload evento se produce más tarde, cuando todo el contenido (ej. imágenes) también ha sido cargado.

La onload evento es un evento estándar en el DOM, mientras que el ready evento es específico para jQuery. El propósito de la ready evento es que debe ocurrir tan pronto como sea posible después de que el documento se ha cargado, de modo que el código que añade funcionalidad a los elementos de la página no es necesario esperar a que la carga de contenido.

130voto

Piskvor Puntos 46986

window.onload es la incorporada en eventos de Javascript, pero como en su implementación había sutil peculiaridades a través de navegadores (FF/IE6/IE8/Opera), jQuery ofrece document.ready, que abstrae los lejos, y los incendios, tan pronto como el DOM de la página esté listo (no espera para las imágenes, etc.).

$(document).ready (ten en cuenta que no document.ready, que es indefinido) es una función jQuery, envasado y proporcionar consistencia a los siguientes eventos:

  • document.ondomcontentready / document.ondomcontentloaded - un bastante nuevo evento que se dispara cuando el documento DOM cargado (que puede ser algo de tiempo antes de que las imágenes etc. se cargan); de nuevo, ligeramente diferente en el IE y en el resto del mundo
  • y window.onload (que se aplica incluso en navegadores antiguos), que se activa cuando la totalidad de la carga de la página (imágenes, estilos, etc.)

85voto

James Drinkard Puntos 2688

document.ready() jQuery evento. JQuery document.ready() método se llama tan pronto como el DOM esté listo (lo que significa que el navegador se ha analizado el código HTML y construido el árbol DOM). Esto le permite ejecutar código tan pronto como el documento está listo para ser manipulado.

Por ejemplo, si el navegador soporta el evento DOMContentLoaded (como muchos de los no-IE de los navegadores), entonces será el fuego en ese evento. Sin embargo, es decir, no puede de manera segura del fuego hasta que el documento de la readyState llega "completa", que es generalmente más tarde.

Dos sintaxis pueden ser utilizados para este:

$(document).ready(function)

El listo() método sólo puede ser utilizado en el documento actual, así que no hay selector se requiere:

$(function)

Puntos principales para document.ready():

  • No va a esperar para que las imágenes se cargan.
  • Se utiliza para ejecutar código JavaScript cuando el DOM esté completamente cargado. Poner los controladores de eventos aquí.
  • Puede ser utilizado varias veces.
  • Reemplace $ con jQuery cuando reciba "$ no está definido."
  • No utilizar si usted quiere manipular imágenes de Uso $(window).load() lugar.

window.onload() es una función de JavaScript. El evento load se activa cuando todo el contenido de su página se haya cargado, incluyendo el DOM (document object model) de los anuncios de banner y de imágenes. Otra diferencia entre los dos es que podemos tener más de un document.ready() de función en una página web, pero sólo uno onload función.

41voto

Vivek Puntos 641

Carga de Windows evento se dispara cuando todo el contenido de su página completamente cargado, incluyendo el DOM (modelo de objetos de documento) de contenido, JavaScript asíncrono, marcos e imágenes, también se puede utilizar body onload= ambos son lo mismo solo window.onload = function(){} y <body onload="func();"> son formas diferentes de usar el mismo evento.

jQuery $document.ready la función del evento se ejecuta un poco antes que window.onload y llamó una vez el DOM(modelo de objetos de Documento) es cargado en la página. No espere a que las imágenes, fotogramas de pleno de la carga.

Tomado de el siguiente artículo: ¿cómo $document.ready() es diferente de window.onload()

22voto

deck Puntos 131

Una palabra de precaución en el uso de $(document).ready() con Internet Explorer. Si una solicitud HTTP se interrumpe antes de que todo el documento es cargado (por ejemplo, mientras que una página de streaming para el navegador, el otro se hace clic en enlace), es decir, se desencadenará la $(document).ready evento.

Si cualquier código dentro de la $(document).ready() de eventos de referencias de objetos DOM, existe la posibilidad de que los objetos no se encuentran, y los errores de Javascript puede ocurrir. Ya sea proteger su referencias a los objetos, o de aplazar el código que hace referencia a esos objetos a la window.load evento.

No he sido capaz de reproducir este problema en otros navegadores (específicamente, Chrome y Firefox)

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X