jQuery - Quali sono le differenze tra $ (documento) .ready e $ (finestra) .load?

Quali sono le differenze tra

$(document).ready(function(){
 //my code here
});

e

$(window).load(function(){
  //my code here
});

E voglio assicurarmi che:

$(document).ready(function(){

}) 

e

$(function(){

}); 

e

jQuery(document).ready(function(){

});

sono uguali.

Puoi dirmi quali differenze e somiglianze tra loro?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Versione query 3.0

Rottura del cambiamento: .load (), .unload () e .error () rimossi

Questi metodi sono collegamenti per le operazioni sugli eventi, ma presentavano diverse limitazioni API. Il .load()metodo dell'evento è in conflitto con il .load() metodo ajax . Il .error()metodo non può essere utilizzato con window.onerror causa del modo in cui il metodo DOM è definito. Se è necessario associare eventi con questi nomi, utilizzare il .on()metodo, ad esempio passare $("img").load(fn)a $(img).on("load", fn). ¹

$(window).load(function() {});

Dovrebbe essere cambiato in

$(window).on('load', function (e) {})

Questi sono tutti equivalenti:

$(function(){
}); 

jQuery(document).ready(function(){
});

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

$(document).on('ready', function(){
})

document.readyè un evento jQuery, viene eseguito quando il DOM è pronto, ad esempio tutti gli elementi sono lì per essere trovati / utilizzati, ma non necessariamente tutto il contenuto.
window.onloadsi attiva in seguito (o allo stesso tempo nei casi peggiori / non riusciti) quando vengono caricate immagini e simili. Quindi, se stai usando le dimensioni dell'immagine, ad esempio, spesso vuoi usare questo invece.

Leggi anche una domanda correlata:
Differenza tra le funzioni $ (window) .load () e $ (document) .ready ()

Dal documento API jQuery

Mentre JavaScript fornisce l' loadevento per l'esecuzione del codice quando viene eseguito il rendering di una pagina, questo evento non viene attivato fino a quando tutti gli asset come le immagini non sono stati completamente ricevuti. Nella maggior parte dei casi, lo script può essere eseguito non appena la gerarchia DOM è stata completamente costruita. Il gestore passato a .ready()è garantito per essere eseguito dopo che il DOM è pronto, quindi questo è di solito il posto migliore per collegare tutti gli altri gestori di eventi ed eseguire altro codice jQuery. Quando si utilizzano script che si basano sul valore delle proprietà di stile CSS, è importante fare riferimento a fogli di stile esterni o incorporare elementi di stile prima di fare riferimento agli script.

Nei casi in cui il codice si basa su risorse caricate (ad esempio, se sono necessarie le dimensioni di un'immagine), il codice deve essere invece inserito in un gestore per l' loadevento.

Risposta alla seconda domanda -

No, sono identici se non si utilizza jQuery in modalità senza conflitto.

Queste tre funzioni sono uguali.

$(document).ready(function(){

}) 

e

$(function(){

}); 

e

jQuery(document).ready(function(){

});

qui $è usato per definire jQuerylike $= jQuery.

Ora la differenza è quella

$(document).readyè l'evento jQuery che viene generato quando DOMviene caricato, quindi viene generato quando la struttura del documento è pronta.

$(window).load l'evento viene generato dopo che l'intero contenuto è stato caricato come pagina contiene immagini, CSS ecc.

La differenza tra $(document).ready()e le $(window).load()funzioni è che il codice incluso all'interno $(window).load()verrà eseguito una volta caricata l'intera pagina (immagini, iframe, fogli di stile, ecc.) Mentre l' evento pronto per il documento viene generato prima che vengano caricate tutte le immagini, iframe ecc., Ma dopo l'intero DOM stesso è pronto.

$(document).ready(function(){

}) 

e

$(function(){

});

e

jQuery(document).ready(function(){

});

Non ci sono differenze tra i 3 codici precedenti.

Sono equivalenti, ma potresti incontrare conflitti se qualsiasi altro framework JavaScript utilizza lo stesso simbolo di dollaro $ come nome di scelta rapida.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

L'evento ready viene sempre eseguito nell'unica pagina html caricata nel browser e le funzioni vengono eseguite .... Ma l'evento load viene eseguito nel momento in cui tutti i contenuti della pagina vengono caricati nel browser per la pagina ... .. possiamo usare $ o jQuery quando usiamo il metodo noconflict () negli script jquery ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

$ (finestra) .load è un evento che viene generato quando il DOM e tutto il contenuto (tutto) sulla pagina viene caricato completamente come CSS, immagini e frame. Un esempio migliore è se vogliamo ottenere la dimensione reale dell'immagine o ottenere i dettagli di qualsiasi cosa la utilizziamo.

$ (document) .ready () indica che il codice in esso contenuto deve essere eseguito una volta caricato il DOM e pronto per essere manipolato dallo script. Non attenderà il caricamento delle immagini per l'esecuzione dello script jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (finestra) .load generato dopo $ (documento) .ready ().

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Sopra 3 sono uguali, $ è il nome alias di jQuery, potresti incontrare conflitti se qualsiasi altro framework JavaScript utilizza lo stesso simbolo di dollaro $. In caso di conflitto, il team di jQuery fornisce una soluzione senza conflitti, per saperne di più.

$ (window) .load è stato deprecato in 1.8 e rimosso in jquery 3.0