¿Cuándo debería usar la función document.ready de jQuery?

107

Me dijeron que usara document.ready cuando comencé a usar Javascript / jQuery, pero nunca supe realmente por qué.

¿Podría alguien proporcionar algunas pautas básicas sobre cuándo tiene sentido envolver el código javascript / jquery dentro de jQuery document.ready?

Algunos temas que me interesan:

.on()Método de jQuery : utilizo .on()bastante el método para AJAX (generalmente en elementos DOM creados dinámicamente). ¿Deberían los .on()controladores de clic estar siempre adentro document.ready ?
Rendimiento: ¿Es más eficaz mantener varios objetos javascript / jQuery dentro o fuera de document.ready (también, es significativa la diferencia de rendimiento?)?
Alcance del objeto: las páginas cargadas con AJAX no pueden acceder a los objetos que estaban dentro del documento de la página anterior. ¿Listo, correcto? Solo pueden acceder a objetos que estaban fuera de document.ready (es decir, objetos verdaderamente "globales")

Actualización: para seguir una de las mejores prácticas, todo mi javascript (la biblioteca jQuery y el código de mi aplicación) está en la parte inferior de mi página HTML y estoy usando el deferatributo en los scripts que contienen jQuery en mis páginas cargadas con AJAX para que puede acceder a la biblioteca jQuery en estas páginas.

javascript jquery dom event-handling document-ready tim peterson
fuente

2

Porque si el DOM no está listo, puede obtener resultados inesperados, eso es todo.

Robert Harvey

1

2.- Bueno, uso afuera solo para depurar y puedo llamar a alguna función / var por consola,

jd_7

@RobertHarvey ¿qué tipo de resultados "inesperados"? ¿Puede dar un ejemplo?

tim peterson

3

Intenta modificar un elemento o atributo que aún no ha llegado al DOM.

Robert Harvey

143

En palabras simples

$(document).readyes un evento que se activa cuando documentestá listo.

Suponga que ha colocado su código jQuery en la headsección e intentando acceder a un domelemento (un ancla, un img, etc.), no podrá acceder a él porque htmlse interpreta de arriba a abajo y sus elementos html no están presentes cuando su código jQuery carreras.

Para superar este problema, colocamos cada código jQuery / javascript (que usa DOM) dentro de la $(document).readyfunción que se llama cuando domse puede acceder a todos los elementos.

Y esta es la razón, cuando coloca su código jQuery en la parte inferior (después de todos los elementos dom, justo antes </body>), no hay necesidad de$(document).ready

No es necesario colocar el onmétodo adentro $(document).readysolo cuando usa el onmétodo documentpor la misma razón que expliqué anteriormente.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

EDITAR

De los comentarios,

$(document).readyno espera imágenes o guiones. Esa es la gran diferencia entre $(document).readyy$(document).load
Solo el código que accede al DOM debe estar en el controlador listo. Si es un complemento, no debería estar en el evento listo.

Jashwant
fuente

@Dipaks Sí, ¿por qué no? Estamos muy acostumbrados a usar $(document).ready. Vea esto

Jashwant

Siempre que cargue jQuery en el heady sus scripts después de que los elementos se manipulen, document.readyno es necesario. Sin embargo, las imágenes son un caso especial ...

elclanrs

@elclanrs Ver mi pregunta actualizada. Estoy cargando jQuery en la parte inferior de mi página HTML con el código específico de mi aplicación justo después de eso.

tim peterson

@Jashwant ¿qué hay de las diferencias de rendimiento de dom.ready frente a no? ¿Son esos relevantes?

tim peterson

1

No ponemos todo el jQuerycódigo en el controlador listo. Único código que accede al DOM. Si es un complemento, no debería estar en el ready evento

Juan Mendes

7

Respuestas:

Método .on () de jQuery: uso bastante el método .on () para AJAX (creando elementos DOM dinámicamente). ¿Deberían los controladores de clic .on () estar siempre dentro de document.ready?

No, no siempre. Si carga su JS en el encabezado del documento, lo necesitará. Si está creando los elementos después de que la página se cargue a través de AJAX, deberá hacerlo. No necesitará hacerlo si el script está debajo del elemento html, también está agregando un controlador.

Rendimiento: ¿Es más eficaz mantener varios objetos javascript / jQuery dentro o fuera de document.ready (también, es significativa la diferencia de rendimiento?)?

Depende. Tomará la misma cantidad de tiempo adjuntar los controladores, solo depende de si desea que suceda inmediatamente mientras se carga la página o si desea que espere hasta que se cargue todo el documento. Así que dependerá de qué otras cosas estés haciendo en la página.

Alcance del objeto: las páginas cargadas con AJAX no pueden acceder a los objetos que estaban dentro del documento de la página anterior. ¿Listo, correcto? ¿Solo pueden acceder a objetos que estaban fuera de document.ready (es decir, objetos verdaderamente "globales")?

Es esencialmente su propia función, por lo que solo puede acceder a vars declaradas en un alcance global (fuera / sobre todas las funciones) o con window.myvarname = '';

Justin
fuente

6

Antes de poder usar jQuery de forma segura, debe asegurarse de que la página esté en un estado en el que esté lista para ser manipulada. Con jQuery, logramos esto poniendo nuestro código en una función y luego pasándole esa función a $(document).ready(). La función que pasamos puede ser simplemente una función anónima .

$(document).ready(function() {  
    console.log('ready!');  
});

Esto ejecutará la función que pasamos a .ready () una vez que el documento esté listo. ¿Que está pasando aqui? Estamos usando $ (document) para crear un objeto jQuery a partir del documento de nuestra página, y luego llamamos a la función .ready () en ese objeto, pasándole la función que queremos ejecutar.

Dado que esto es algo que se encontrará haciendo mucho, hay un método abreviado para esto si lo prefiere: la función $ () cumple una doble función como un alias para $ (document) .ready () si le pasa una función:

$(function() {  
    console.log('ready!');  
});

Esta es una buena lectura: Jquery Fundamentals

Tom Sarduy
fuente

3

No debe confundirse con lo (function($){ })(jQuery);que envuelve su código para que $ sea jQuery dentro de ese cierre

John Magnolia

3

.ready () : especifique una función para ejecutar cuando el DOM esté completamente cargado.

$(document).ready(function() {
  // Handler for .ready() called.
});

Aquí hay una lista de todos los métodos jQuery

Siga leyendo Introducción a $ (document) .ready ()

Dipak
fuente

3

Para ser realista, document.readyno se necesita para nada más que manipular el DOM con precisión y no siempre es necesario o la mejor opción. Lo que quiero decir es que cuando desarrolla un gran complemento de jQuery, por ejemplo, casi no lo usa en todo el código porque está tratando de mantenerlo SECO, por lo que abstrae tanto como sea posible en métodos que manipulan el DOM pero que están destinados a ser invocados mas tarde. Cuando todo su código está estrechamente integrado, el único método expuesto document.readysuele ser initdonde ocurre toda la magia DOM. Espero que esto responda a su pregunta.

elclanrs
fuente

0

Debes vincular todas las acciones en document.ready, porque debes esperar hasta que el documento esté completamente cargado.

Pero, debe crear funciones para todas las acciones y llamarlas desde dentro del documento. Cuando cree funciones (sus objetos globales), llámelas cuando quiera. Entonces, una vez que se carguen sus nuevos datos y se creen nuevos elementos, llame a esas funciones nuevamente.

Estas funciones son aquellas en las que ha vinculado los eventos y elementos de acción.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

Pulkit Mittal
fuente

0

Agregué un enlace a un div y quería hacer algunas tareas en el clic. Agregué el código debajo del elemento adjunto en el DOM pero no funcionó. Aquí está el código:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

No funcionó. Luego coloqué el código jQuery dentro de $ (document) .ready y funcionó perfectamente. Aquí está.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

Safeer Ahmed
fuente

-2

El evento ready ocurre cuando el DOM (modelo de objeto de documento) se ha cargado.

Debido a que este evento ocurre después de que el documento está listo, es un buen lugar para tener todos los demás eventos y funciones de jQuery. Como en el ejemplo anterior.

El método ready () especifica qué sucede cuando ocurre un evento ready.

Consejo: el método ready () no debe utilizarse junto con.

Shrikant Shiledar
fuente