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

Risposte:

1243

L' readyevento si verifica dopo che il documento HTML è stato caricato, mentre l' onloadevento si verifica in seguito, quando è stato caricato anche tutto il contenuto (ad es. Immagini).

L' onloadevento è un evento standard nel DOM, mentre l' readyevento è specifico di jQuery. Lo scopo readydell'evento è che dovrebbe verificarsi il prima possibile dopo il caricamento del documento, in modo che il codice che aggiunge funzionalità agli elementi nella pagina non debba attendere il caricamento di tutto il contenuto.

— Guffa
fonte
153
@baptx: ti sbagli. L' readyevento è specifico di jQuery. Sta usando l' DOMContentLoadedevento se è disponibile nel browser, altrimenti lo emula. Non esiste un equivalente esatto nel DOM perché l' DOMContentLoadedevento non è supportato in tutti i browser.
— Guffa,
18
Ok ma lo stesso risultato esiste con DOMContentLoaded, forse avresti dovuto specificarlo
— baptx
55
@baptx: non pensavo che fosse pertinente alla domanda, e ancora non lo faccio.
— Guffa,
17
Perché il downvote? Se non spieghi cosa pensi sia sbagliato, non puoi migliorare la risposta.
— Guffa,
4
Non esiste un evento come onload. onloadè il nome di una proprietà dell'oggetto che memorizza una funzione da invocare quando loadviene attivato l' evento.
— Scott Marcus,
140

window.onloadè l'evento JavaScript incorporato, ma poiché la sua implementazione ha avuto strane imperfezioni tra i browser (Firefox, Internet Explorer 6, Internet Explorer 8 e Opera ), fornisce jQuery document.ready, che li astrae e si attiva non appena il DOM della pagina è pronto (non aspetta immagini, ecc.).

$(document).ready(nota che non lo è document.ready , che non è definito) è una funzione jQuery, che avvolge e fornisce coerenza ai seguenti eventi:

  • document.ondomcontentready/ document.ondomcontentloaded- un evento newish che si attiva quando viene caricato il DOM del documento (che potrebbe essere un po 'di tempo prima che vengano caricate le immagini, ecc.); di nuovo, leggermente diverso in Internet Explorer e nel resto del mondo
  • e window.onload(che è implementato anche nei vecchi browser), che si attiva quando viene caricata l'intera pagina (immagini, stili, ecc.)
— Piskvor lasciò l'edificio
fonte
16
C'è un leggero malinteso qui: l' loadevento di windowè implementato in modo abbastanza coerente in tutti i browser. Il problema che jQuery e le altre librerie stanno cercando di risolvere è quello che hai citato, ovvero che l' loadevento non viene generato fino a quando non sono state caricate tutte le risorse dipendenti come immagini e fogli di stile, il che potrebbe richiedere molto tempo dopo il caricamento completo del DOM, reso e pronto per l'interazione. L'evento che gli incendi in maggior parte dei browser quando il DOM è pronto si chiama DOMContentLoaded, non è DOMContentReady.
— Tim Down
2
@Tim Down: ragionevolmente è la parola chiave qui; almeno un po 'di sniffing degli oggetti era necessario, anche con onload(ci sono differenze tra FF / IE / Opera). Per quanto riguarda il DOMContentLoaded, hai completamente ragione. Modifica per chiarire.
— Piskvor lasciò l'edificio il
Che tipo di fiuto oggetto intendi?
— Tim Down
1
@Tim Down: so che Opera ce l' aveva , ma il trigger di evento su di esso era leggermente eccentrico (per innescare in modo affidabile, document.onloadera utilizzabile). Per quanto riguarda window.onload: window.onload = fn1;window.onload=fn2;- solo fn2 verrebbe invocato al caricamento. Alcuni webhost gratuiti inseriscono il proprio codice nei documenti e talvolta questo ha bloccato il codice in-page.
— Piskvor lasciò l'edificio il
1
La scrittura di "document.ready" non è corretta? l'oggetto documento non ha un metodo pronto, l'oggetto jQuery viene restituito dalla chiamata $ (documento). Modifica questa risposta se ho ragione perché è molto confuso.
— A. Sallai,
87

$(document).ready()è un evento jQuery. Il $(document).ready()metodo di JQuery viene chiamato non appena il DOM è pronto (il che significa che il browser ha analizzato l'HTML e creato l'albero del DOM). Ciò consente di eseguire il codice non appena il documento è pronto per essere manipolato.

Ad esempio, se un browser supporta l'evento DOMContentLoaded (come fanno molti browser non IE), verrà attivato su quell'evento. (Si noti che l'evento DOMContentLoaded è stato aggiunto a IE solo in IE9 +.)

A tale scopo è possibile utilizzare due sintassi: 

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

O la versione abbreviata:

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

Punti principali per $(document).ready():

  • Non attenderà il caricamento delle immagini.
  • Utilizzato per eseguire JavaScript quando il DOM è completamente caricato. Metti qui i gestori di eventi.
  • Può essere usato più volte.
  • Sostituisci $con jQueryquando ricevi "$ non definito."
  • Non utilizzato se si desidera manipolare le immagini. Usa $(window).load()invece.

window.onload()è una funzione JavaScript nativa. L' window.onload()evento viene generato quando tutti i contenuti della tua pagina sono stati caricati, inclusi DOM (modello a oggetti del documento), banner pubblicitari e immagini. Un'altra differenza tra i due è che, mentre possiamo avere più di una $(document).ready()funzione, possiamo avere solo una onloadfunzione.

— James Drinkard
fonte
4
Punto minore: la discussione su IE è formulata male. Non è che IE (8 e precedenti) "non possa sparare in modo sicuro" fino a quando lo stato del documento pronto non sia completo, è che a IE mancava un evento DOMContentLoaded. Non una questione di "sicurezza", ma una funzionalità mancante in IE, aggiunta in IE 9.
— ToolmakerSteve
Hai ragione, quindi ho modificato la risposta per riflettere il tuo commento e grazie!
— James Drinkard,
Dici "Non aspetterà che le immagini vengano caricate". che dire di altri file, soprattutto? Spesso prima di chiamare la funzione da un altro file, devo sapere se è caricato.
— Darius.V,
Questo è un altro argomento del tutto, ma se capisco cosa stai chiedendo, è basato su come strutturi la tua pagina, incluso l'ordine in cui metti i file js. Ecco un link che approfondisce: ablogaboutcode.com/2011/06/14/… HTH, James
— James Drinkard,
Perché qualcuno vorrà usare $ (document) .ready () più volte?
— Usman,
43

Un evento di caricamento di Windows viene generato quando tutto il contenuto della pagina è completamente caricato, incluso il contenuto DOM (modello a oggetti documento) e JavaScript asincrono , frame e immagini . Puoi anche usare body onload =. Entrambi sono uguali; window.onload = function(){}e <body onload="func();">sono modi diversi di utilizzare lo stesso evento.

L'$document.ready evento della funzione jQuery viene eseguito un po 'prima di window.onloade viene chiamato una volta caricato il DOM (modello a oggetti del documento) sulla pagina. Non aspetterà che le immagini, i frame vengano caricati completamente .

Tratto dal seguente articolo: come $document.ready()è diverso dawindow.onload()

— Vivek
fonte
Penso che questa sia la risposta migliore!
— Haoyu Chen,
3
Potrei essere d'accordo, se non fosse copiato parola per parola.
— Kevin B,
23 

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Espandi frammento

— dev4092
fonte
22

Un avvertimento sull'utilizzo $(document).ready()con Internet Explorer. Se una richiesta HTTP viene interrotta prima che venga caricato l'intero documento (ad esempio, mentre una pagina viene trasmessa in streaming al browser, viene fatto clic su un altro collegamento) IE attiverà l' $(document).readyevento.

Se un codice all'interno $(document).ready()dell'evento fa riferimento a oggetti DOM, esiste la possibilità che tali oggetti non vengano trovati e possono verificarsi errori Javascript. O proteggi i tuoi riferimenti a quegli oggetti o differisci il codice che fa riferimento a quegli oggetti all'evento window.load.

Non sono stato in grado di riprodurre questo problema in altri browser (in particolare, Chrome e Firefox)

— ponte
fonte
Quale versione di IE? So che dovrei preoccuparmi della compatibilità, ma è difficile con IE. È accettabile utilizzare document. già solo per JavaScript?
— Monica,
1
— James Drinkard,
22

Un piccolo consiglio:

Usa sempre il window.addEventListenerper aggiungere un evento alla finestra. Perché in questo modo è possibile eseguire il codice in diversi gestori di eventi.

Codice corretto:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})
Espandi frammento

Codice non VALIDO:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}
Espandi frammento

Questo perché onload è solo proprietà dell'oggetto, che viene sovrascritto.

Per analogia con addEventListener, è meglio usare $(document).ready()piuttosto che onload.

— Илья Зеленько
fonte
3
Questo non risponde alla domanda posta.
17

eventi

$(document).on('ready', handler)si lega all'evento pronto da jQuery. Il gestore viene chiamato quando viene caricato il DOM . Risorse come le immagini forse mancano ancora . Non verrà mai chiamato se il documento è pronto al momento della rilegatura. jQuery utilizza DOMContentLoaded -Event per questo, emulandolo se non disponibile.

$(document).on('load', handler)è un evento che verrà generato una volta caricate tutte le risorse dal server. Le immagini sono caricate ora. Mentre onload è un evento HTML non elaborato, ready è creato da jQuery.

funzioni

$(document).ready(handler)in realtà è una promessa . Il gestore verrà chiamato immediatamente se il documento è pronto al momento della chiamata. Altrimenti si lega a ready-Event.

Prima di jQuery 1.8 , $(document).load(handler)esisteva come alias di $(document).on('load',handler).

Ulteriori letture

— 57%
fonte
puoi per favore spiegare $ (document) .load (handler) si comporta come vincolante per il load-event. A differenza di $ .fn. già, non chiamerà immediatamente?
— Nabeel Khan,
Penso che ti sia confuso $.fn.loadche non si comporti più come raccoglitore di eventi. In effetti, è obsoleto dal jquery 1.8. L'ho aggiornato di conseguenza
— abstraktor il
16

Il $(document).ready()è un jQuery evento che si verifica quando il documento HTML è stato completamente caricato, mentre l' window.onloadevento si verifica più tardi, quando tutto, compreso le immagini sulla pagina caricata.

Anche window.onload è un evento javascript puro nel DOM, mentre l' $(document).ready()evento è un metodo in jQuery.

$(document).ready() di solito è il wrapper per jQuery per assicurarsi che tutti gli elementi caricati vengano utilizzati in jQuery ...

Guarda il codice sorgente di jQuery per capire come funziona:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

Inoltre ho creato l'immagine qui sotto come riferimento rapido per entrambi:

inserisci qui la descrizione dell'immagine

— Alireza
fonte
1
bellissimo, riferirsi alla documentazione è un punto in più .. grazie
— Irf
13

window.onload: un normale evento JavaScript.

document.ready: un evento jQuery specifico quando l'intero HTML è stato caricato.

— Amir Mehdi Delta
fonte
11

Una cosa da ricordare (o dovrei dire ricordare) è che non puoi impilare onloads come puoi ready. In altre parole, jQuery magic consente più readys sulla stessa pagina, ma non puoi farlo con onload.

L'ultimo onloadavrà la precedenza su tutti i precedenti onload.

Un buon modo per gestirlo è con una funzione apparentemente scritta da un Simon Willison e descritta in Utilizzo di più funzioni JavaScript Onload .

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});
— Donald A Nummer Jr
fonte
11

Document.ready(un evento jQuery) verrà attivato quando tutti gli elementi sono presenti e possono essere indicati nel codice JavaScript, ma il contenuto non viene necessariamente caricato. Document.readyviene eseguito quando viene caricato il documento HTML.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Il window.loadtuttavia aspetterà la pagina da pieno carico. Ciò include cornici interne, immagini, ecc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
— Mike Clark
fonte
5

L'evento document.ready si verifica quando il documento HTML è stato caricato e l' window.onloadevento si verifica sempre più tardi, quando è stato caricato tutto il contenuto (immagini, ecc.).

È possibile utilizzare l' document.readyevento se si desidera intervenire "in anticipo" nel processo di rendering, senza attendere il caricamento delle immagini. Se hai bisogno che le immagini (o qualsiasi altro "contenuto") siano pronte prima che lo script "faccia qualcosa", devi aspettare fino a quando window.onload.

Ad esempio, se stai implementando un modello "Presentazione" e devi eseguire calcoli basati sulle dimensioni dell'immagine, potresti voler aspettare fino a window.onload. Altrimenti, potresti riscontrare alcuni problemi casuali, a seconda della velocità con cui verranno caricate le immagini. Il tuo script verrebbe eseguito contemporaneamente al thread che carica le immagini. Se lo script è abbastanza lungo o il server è abbastanza veloce, potresti non notare un problema se le immagini arrivano in tempo. Ma la pratica più sicura sarebbe consentire il caricamento delle immagini.

document.readypotrebbe essere un piacevole evento per mostrare agli utenti alcuni segni di "caricamento in corso ..." e, successivamente window.onload, è possibile completare qualsiasi script che necessitasse di risorse caricate, quindi rimuovere il segno "Caricamento in corso ...".

Esempi: -

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;
— Nimesh Khatri
fonte
2

window.onloadè una funzione integrata di JavaScript. window.onloadtrigger quando viene caricata la pagina HTML. window.onloadpuò essere scritto una sola volta.

document.readyè una funzione della libreria jQuery. document.readysi innesca quando HTML e tutto il codice JavaScript, CSS e immagini inclusi nel file HTML sono completamente caricati. document.readypuò essere scritto più volte in base alle esigenze.

— Amit
fonte
"window.onload è una funzione" non è corretto poiché @ Илья-Зеленько dimostra che è una proprietà e non una funzione. Dettagli: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… considerando che .ready () è una funzione e prevede un gestore.
— vik
1

Quando dici $(document).ready(f), dici al motore di script di fare quanto segue:

  1. ottenere il documento oggetto e inviarlo, poiché non è nell'ambito locale, deve eseguire una ricerca nella tabella hash per trovare dove si trova il documento, fortunatamente il documento è associato a livello globale, quindi è una singola ricerca.
  2. trova l'oggetto $ e selezionalo, poiché non è nell'ambito locale, deve eseguire una ricerca nella tabella hash, che può avere o meno collisioni.
  3. trova l'oggetto f in ambito globale, che è un'altra ricerca nella tabella hash, oppure invia l'oggetto funzione e inizializzalo.
  4. chiamata ready dell'oggetto selezionato, che comporta un'altra ricerca nella tabella hash nell'oggetto selezionato per trovare il metodo e invocarlo.
  5. fatto.

Nel migliore dei casi, si tratta di 2 ricerche nella tabella hash, ma questo ignora il pesante lavoro svolto da jQuery, dove $ trova il lavello della cucina di tutti i possibili input per jQuery, quindi è probabile che un'altra mappa invii la query al gestore corretto.

In alternativa, puoi farlo:

window.onload = function() {...}

quale sarà

  1. trova la finestra dell'oggetto in ambito globale, se JavaScript è ottimizzato, saprà che poiché la finestra non è cambiata, ha già l'oggetto selezionato, quindi non è necessario fare nulla.
  2. l'oggetto funzione viene inserito nello stack dell'operando.
  3. controlla se onloadè una proprietà oppure no eseguendo una ricerca nella tabella hash, poiché lo è, si chiama come una funzione.

Nel migliore dei casi, questo costa una singola ricerca nella tabella hash, che è necessaria perché onload deve essere recuperata.

Idealmente, jQuery dovrebbe compilare le proprie query in stringhe che possono essere incollate per fare ciò che si desidera che jQuery faccia, ma senza l'invio di runtime di jQuery. In questo modo hai un'opzione di entrambi

  1. effettuare spedizioni dinamiche di jquery come facciamo oggi.
  2. chiedi a jQuery di compilare la tua query in una stringa JavaScript pura che può essere passata a eval per fare ciò che desideri.
  3. copia il risultato di 2 direttamente nel tuo codice e salta il costo di eval.
— Dmitry
fonte
0

window.onload è fornito dall'API DOM e indica "l'evento load viene generato quando una determinata risorsa è stata caricata".

"L'evento di caricamento viene generato alla fine del processo di caricamento del documento. A questo punto, tutti gli oggetti nel documento si trovano nel DOM e tutte le immagini, gli script, i collegamenti e i frame secondari hanno terminato il caricamento." Onload DOM

Ma in jQuery $ (document) .ready () verrà eseguito solo quando la pagina Document Object Model (DOM) è pronta per l'esecuzione del codice JavaScript. Questo non include immagini, script, iframe ecc. Jquery ready event

Quindi il metodo jquery ready verrà eseguito prima dell'evento onload dom.

— andyCao
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.