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"); }); 
  

document.ready è un evento jQuery, viene eseguito quando il DOM è pronto, ad esempio tutti gli elementi sono lì da trovare / usati, ma non necessariamente tutto il contenuto.
window.onload scatta più tardi (o allo stesso tempo nei casi peggiori / in errore) quando vengono caricate immagini e simili. Pertanto, se utilizzi le dimensioni dell’immagine, ad esempio, preferisci utilizzare questa opzione.

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

Dal documento dell’API jQuery

Mentre JavaScript fornisce l’evento di load per l’esecuzione del codice quando viene eseguito il rendering di una pagina, questo evento non viene triggersto fino a quando tutte le risorse come le immagini non sono state completamente ricevute. 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 di solito è il posto migliore per colbind 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 richieste le dimensioni di un’immagine), il codice deve essere inserito in un gestore per l’evento di load .


Risposta alla seconda domanda –

No, sono identici purché non si usi jQuery in nessuna modalità di conflitto.

L’evento pronto si verifica dopo il caricamento del documento HTML, mentre l’evento onload si verifica in un secondo momento, quando viene caricato anche tutto il contenuto (ad esempio le immagini).

L’evento onload è un evento standard nel DOM, mentre l’evento ready è specifico per jQuery. Lo scopo dell’evento pronto è che dovrebbe avvenire il prima ansible 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.

Queste tre funzioni sono le stesse.

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

e

 $(function(){ }); 

e

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

qui $ è usato per definire jQuery come $ = jQuery .

Ora la differenza è quella

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

$(window).load evento $(window).load viene $(window).load dopo il caricamento di tutto il contenuto come se la pagina contenga immagini, css ecc.

La differenza tra le $(document).ready() e $(window).load() è che il codice incluso in $(window).load() verrà eseguito una volta l’intera pagina (immagini, iframe, fogli di stile, ecc.) vengono caricati mentre l’evento pronto per il documento viene triggersto prima che tutte le immagini, gli iframe ecc. siano caricati, ma dopo che l’intero DOM è pronto.


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

e

 $(function(){ }); 

e

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

Non ci sono differenze tra i 3 codici precedenti.

Sono equivalenti, ma potresti trovarti ad affrontare un conflitto se qualsiasi altro framework JavaScript usa lo stesso simbolo del dollaro $ come nome di scelta rapida.

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

Penso che dovresti dare un’occhiata a questo articolo: 6 diversi tipi di $ (document) .ready () Esempi

L’evento ready viene sempre eseguito all’unica pagina html caricata nel browser e le funzioni vengono eseguite …. Ma l’evento load viene eseguito al momento di caricare tutti i contenuti della pagina 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"); }); 

$ (window) .load è un evento che si triggers quando il DOM e tutto il contenuto (tutto) della pagina è completamente caricato come CSS, immagini e frame. Un buon esempio è se vogliamo ottenere la dimensione effettiva dell’immagine o ottenere i dettagli di qualsiasi cosa la usiamo.

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

  

$ (window) .load sparato dopo $ (document) .ready ().

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

Al di sopra di 3 sono uguali, $ è il nome alias di jQuery, si può affrontare un conflitto se qualsiasi altro framework JavaScript usa lo stesso simbolo del dollaro $. Se si affrontano conflitti, il team jQuery fornisce una soluzione senza conflitti per saperne di più.

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