Quando dovrei usare la funzione document.ready di jQuery?

107

Mi è stato detto di usare document.ready quando ho iniziato a usare Javascript / jQuery, ma non ho mai imparato davvero il motivo.

Qualcuno potrebbe fornire alcune linee guida di base su quando ha senso avvolgere il codice javascript / jquery all'interno di jQuery document.ready ?

Alcuni argomenti che mi interessano:

.on()Metodo di jQuery : Uso .on()abbastanza il metodo per AJAX (tipicamente su elementi DOM creati dinamicamente). I .on()gestori dei clic dovrebbero essere sempre all'interno document.ready ?
Prestazioni: è più efficiente mantenere vari oggetti javascript / jQuery all'interno di o all'esterno di document.ready (inoltre, la differenza di prestazioni è significativa?)?
Ambito dell'oggetto: le pagine caricate con AJAX non possono accedere agli oggetti che erano all'interno del documento della pagina precedente. Già, corretto? Possono accedere solo agli oggetti che erano al di fuori di document.ready (cioè oggetti veramente "globali")?

Aggiornamento: per seguire una best practice, tutto il mio javascript (la libreria jQuery e il codice della mia app) è in fondo alla mia pagina HTML e sto usando l' deferattributo sugli script contenenti jQuery sulle mie pagine caricate con AJAX in modo che io può accedere alla libreria jQuery su queste pagine.

— tim peterson
fonte

2

Perché se il DOM non è pronto, potresti ottenere risultati imprevisti, tutto qui.

— Robert Harvey,

1

2.- Beh, io uso all'esterno solo per eseguire il debug e posso chiamare qualche var / funzione dalla console,

— jd_7

@RobertHarvey che tipo di risultati "inaspettati"? puoi fornire un esempio?

— tim peterson

3

Si tenta di modificare un elemento o un attributo che non è ancora arrivato al DOM.

— Robert Harvey

143

In parole semplici,

$(document).readyè un evento che si accende quando documentè pronto.

Supponiamo di aver inserito il codice jQuery nella headsezione e di provare ad accedere a un domelemento (un'ancora, un img ecc.), Non sarai in grado di accedervi perché htmlviene interpretato dall'alto verso il basso e i tuoi elementi html non sono presenti quando il tuo codice jQuery corre.

Per ovviare a questo problema, inseriamo ogni codice jQuery / javascript (che utilizza DOM) all'interno della $(document).readyfunzione che viene chiamata quando tutti idom possibile accedere a elementi.

E questo è il motivo, quando inserisci il tuo codice jQuery in fondo (dopo tutti gli elementi dom, appena prima </body>), non è necessario$(document).ready

Non è necessario posizionare il onmetodo all'interno $(document).readysolo quando si utilizza il onmetodo documentper lo stesso motivo che ho spiegato sopra.

    //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 () {
    });

MODIFICARE

Dai commenti,

$(document).readynon aspetta immagini o script. Questa è la grande differenza tra $(document).readye$(document).load
Solo il codice che accede al DOM dovrebbe essere nel gestore pronto. Se è un plugin, non dovrebbe essere nell'evento pronto.

— Jashwant
fonte

@Dipaks Sì, perché no? Siamo solo molto abituati a usare $(document).ready. Vedi questo

— Jashwant

Finché carichi jQuery in heade sei script dopo che gli elementi vengono manipolati, document.readynon è necessario. Le immagini sono un caso speciale però ...

— elclanrs

@elclanrs Vedi la mia domanda aggiornata. Sto caricando jQuery nella parte inferiore della mia pagina HTML con il mio codice specifico per l'app subito dopo.

— tim peterson

@ Jashwant che ne dici delle differenze di prestazioni di dom.ready vs. not? Sono rilevanti?

— tim peterson

1

Non mettiamo tutto il jQuerycodice nel gestore pronto. Solo il codice che accede al DOM. Se è un plugin, non dovrebbe essere ready nell'evento

— Juan Mendes

7

risposte:

Metodo .on () di jQuery: Uso un po 'il metodo .on () per AJAX (creando dinamicamente elementi DOM). I gestori di clic .on () dovrebbero essere sempre all'interno di document.ready?

No, non sempre. Se carichi il tuo JS nell'intestazione del documento dovrai farlo. Se stai creando gli elementi dopo il caricamento della pagina tramite AJAX, dovrai farlo. Non sarà necessario se lo script è sotto l'elemento html, stai aggiungendo anche un gestore.

Prestazioni: è più performante mantenere vari oggetti javascript / jQuery all'interno o all'esterno di document.ready (inoltre, la differenza di prestazioni è significativa?)?

Dipende. Ci vorrà la stessa quantità di tempo per collegare i gestori, dipende solo se vuoi che avvenga immediatamente durante il caricamento della pagina o se vuoi che attenda fino al caricamento dell'intero documento. Quindi dipenderà da quali altre cose stai facendo sulla pagina.

Ambito dell'oggetto: le pagine caricate con AJAX non possono accedere agli oggetti che erano all'interno del documento della pagina precedente. Già, corretto? Possono accedere solo agli oggetti che erano al di fuori di document.ready (cioè oggetti veramente "globali")?

È essenzialmente la sua funzione, quindi può accedere solo alle variabili dichiarate in un ambito globale (al di fuori / sopra tutte le funzioni) o con window.myvarname = '';

— Justin
fonte

6

Prima di poter utilizzare in sicurezza jQuery è necessario assicurarsi che la pagina sia in uno stato in cui è pronta per essere manipolata. Con jQuery, otteniamo ciò inserendo il nostro codice in una funzione e quindi passando quella funzione a $(document).ready(). La funzione che passiamo può essere solo una funzione anonima .

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

Questo eseguirà la funzione che passiamo a .ready () una volta che il documento è pronto. Cosa sta succedendo qui? Usiamo $ (document) per creare un oggetto jQuery dal documento della nostra pagina, quindi chiamiamo la funzione .ready () su quell'oggetto, passandogli la funzione che vogliamo eseguire.

Dato che questo è qualcosa che ti troverai a fare molto, c'è un metodo abbreviato per questo se preferisci: la funzione $ () fa il doppio dovere come alias per $ (document) .ready () se le passi una funzione:

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

Questa è una buona lettura: Jquery Fundamentals

— Tom Sarduy
fonte

3

Da non confondere con il (function($){ })(jQuery);quale avvolge il codice in modo che $ sia jQuery all'interno di quella chiusura

— John Magnolia

3

.ready () - Specifica una funzione da eseguire quando il DOM è completamente caricato.

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

Ecco un elenco di tutti i metodi jQuery

Continua a leggere Introduzione a $ (document) .ready ()

— Dipak
fonte

3

Per essere realistici, document.readynon è necessario per nient'altro che manipolare accuratamente il DOM e non è sempre necessario o l'opzione migliore. Quello che voglio dire è che quando sviluppi un grande plugin jQuery, ad esempio, lo usi a malapena in tutto il codice perché stai cercando di mantenerlo ASCIUTTO, quindi astratti il più possibile in metodi che manipolano il DOM ma sono pensati per essere invocati più tardi. Quando tutto il tuo codice è strettamente integrato, l'unico metodo esposto document.readyè solitamente quello in initcui avviene tutta la magia del DOM. Spero che questo risponda alla tua domanda.

— elclanrs
fonte

0

Dovresti associare tutte le azioni in document.ready, perché dovresti aspettare che il documento sia completamente caricato.

Tuttavia, dovresti creare funzioni per tutte le azioni e chiamarle dall'interno di document.ready. Quando crei funzioni (i tuoi oggetti globali), chiamale ogni volta che vuoi. Quindi, una volta caricati i nuovi dati e creati nuovi elementi, chiama di nuovo quelle funzioni.

Queste funzioni sono quelle in cui hai associato gli eventi e gli elementi di azione.

$(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
fonte

0

Ho aggiunto un collegamento a un div e volevo eseguire alcune attività con il clic. Ho aggiunto il codice sotto l'elemento aggiunto nel DOM ma non ha funzionato. Ecco il codice:

<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>

Non ha funzionato. Quindi ho inserito il codice jQuery all'interno di $ (document) .ready e ha funzionato perfettamente. Ecco qui.

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

— Safeer Ahmed
fonte

-2

L'evento ready si verifica quando il DOM (document object model) è stato caricato.

Poiché questo evento si verifica dopo che il documento è pronto, è un buon posto per avere tutti gli altri eventi e funzioni jQuery. Come nell'esempio sopra.

Il metodo ready () specifica cosa succede quando si verifica un evento ready.

Suggerimento: il metodo ready () non deve essere utilizzato insieme a.

— Shrikant Shiledar
fonte