¿Cuáles son los peligros de ejecutar jQuery sin $ (document) .ready() ;?

Question

Autoexplicativo, espero.

Answer 1

Sus selectores jQuery omitirán aleatoriamente cualquier elemento porque aún no está cargado (por el navegador).

Answer 2

Será impredecible cuando la secuencia de comandos se ejecute de navegador a navegador, página a página.

Answer 3

$ (document) .ready() es la forma de jQuery de asegurarse de que el código que desea ejecutar en la carga de página se ejecuta al mismo tiempo en todos los navegadores.

También proporciona un mecanismo para apilar diferentes funciones para ejecutar en la carga de la página. Si no lo usa y tiene múltiples asignaciones onLoad, solo se ejecutará el último agregado.

Answer 4

Al seleccionar elementos en el DOM, a veces funcionarán, y a veces no funcionarán.

Simplemente depende de si se han cargado o no.

Sin embargo, si inserta el script al final del documento, generalmente estará bien. (Dado que en ese momento debería haber cargado todo).

Answer 5

Esto es lo primero que debe aprender sobre jQuery: si desea que un evento funcione en su página, debe llamarlo dentro de la función $ (document) .ready(). Todo lo que contenga se cargará tan pronto como se cargue DOM y antes de que se carguen los contenidos de la página.

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
}); 

La función $ (document) .ready() tiene un montón de ventajas sobre otras formas de hacer que los eventos funcionen. En primer lugar, no tiene que poner ninguna marca de "comportamiento" en el HTML. Puede separar todo su JavaScript/jQuery en un archivo separado donde sea más fácil de mantener y donde pueda mantenerse fuera del camino del contenido. Nunca me gustó ver todos esos mensajes "javascript: void()" en la barra de estado cuando estaba sobre un enlace. Eso es lo que ocurre cuando adjunta el evento directamente dentro de una etiqueta.

En algunas páginas que usan JavaScript tradicional, verá un atributo "onload" en la etiqueta. El problema con esto es que está limitado a una sola función. Ah, sí, y agrega el marcado "conductual" al contenido nuevamente. El excelente libro de Jeremy Keith, DOM Scripting, me mostró cómo crear una función addLoadEvent en un archivo JavaScript separado que permite que se carguen múltiples funciones dentro de él. Pero requiere una buena cantidad de código para algo que debería ser bastante directo. Además, desencadena esos eventos cuando se carga la ventana, lo que me lleva a otra ventaja de $ (document) .ready().

Con $ (document) .ready(), puede hacer que sus eventos se carguen o disparen o lo que usted quiera que hagan antes de que se cargue la ventana. Todo lo que guarde entre corchetes está listo para ejecutarse lo antes posible, tan pronto como el navegador registra el DOM, lo que permite ocultarlo y mostrar los efectos y otras cosas inmediatamente cuando el usuario ve los elementos de la página por primera vez.

referencia desde http://docs.jquery.com/Tutorials:Introducing_ $ ready (documento)()

Answer 6

bassicly utilizar esta regla básica:

si su código implica el DOM envolver el código en $ (document) ready(). Si no involucra el DOM, entonces no lo ajuste en $ (documento).ready()

Answer 7

hmm si no está empaquetado, es simplemente el antiguo JavaScript, haz lo que quieras con eso, pero la biblioteca jQuery se cargará, es difícil de decir.

Answer 8

Hay dos razones principales para utilizar

$(document).ready (function()) // or $(function()) 

1) Se asegura de que el código en tan sólo se ejecuta una vez el DOM está totalmente cargado (esto no incluye la carga de imágenes, flash u otros recursos, simplemente el DOM construido a partir del HTML). Esto significa que puede colocar el javascript en cualquier lugar en el HTML en lugar de en la parte inferior (que con vainilla javascript es el único lugar donde puede colocarlo para garantizar que funcione en todo el DOM en lugar de lo que está actualmente cargado). A menos que use el evento window.onload que también lo garantiza, pero solo se puede usar una vez. Lo que me lleva a mi segundo punto;

2) Le permite disparar múltiples funciones cuando la página se ha cargado, en lugar del uso único de window.onload que tiene cuando usa vainilla javascript. Esto es genial porque significa que no tiene que a) escribir su propia función para cuidarlo, b) preocuparse por verificar si ya hay una función de carga de otra biblioteca, c) pasar lo que parece ser años de depuración solo para descubrir que su ventana.oncarga ha sido sobrescrita por el código de otra persona.

Punto de bonificación: 3) Parece genial, ¿no? : P

Otras notas: Si no está usando o manipulando el DOM, entonces su código no necesita ingresar a la función $ (document) .ready().

Poner sus archivos javascript en la parte inferior del HTML, justo antes de la </cuerpo > dará un aumento percibido en esparza carga - en realidad no es más rápido, pero el navegador cargará la JS después de que el HTML, por lo que puede comenzar renderizando el HTML mientras el JS está cargando. Esto a su vez significa que algo aparecerá en la pantalla del usuario una fracción de segundo antes que una secuencia de comandos en el <encabezado> - y en la web, conteo de segundos divididos :)