window.onload vs document.onload

Che è più ampiamente supportato: window.onload o document.onload ?

window.onload

Quando sparano?

window.onload

  • Per impostazione predefinita, viene triggersto quando viene caricata l’intera pagina, incluso il suo contenuto (immagini, css, script, ecc.)
  • In alcuni browser ora assume il ruolo di document.onload e si triggers anche quando il DOM è pronto.

document.onload

  • Viene chiamato quando il DOM è pronto e può essere precedente alle immagini e viene caricato altro contenuto esterno.

Quanto sono supportati?

window.onload sembra essere il più ampiamente supportato. In effetti, alcuni dei browser più moderni hanno in un certo senso sostituito document.onload con window.onload. Molto probabilmente il problema del supporto del browser è il motivo per cui molte persone stanno iniziando a utilizzare librerie come jQuery per gestire il controllo del fatto che il documento sia pronto in questo modo:

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

Per lo scopo della storia:

window.onload vs body.onload

Come nota, è stata posta una domanda simile su codingforums qualche tempo fa riguardo l’uso di window.onload su body.onload . Il risultato sembrava essere che dovresti usare window.onload perché è bene separare la tua struttura dall’azione.

L’idea generale è che window.onload si triggers quando la finestra del documento è pronta per la presentazione e document.onload si triggers quando l’ albero DOM (creato dal codice di markup all’interno del documento) è completato .

Idealmente, iscriversi agli eventi del DOM-tree , consente manipolazioni off-screen tramite Javascript, causando quasi nessun carico della CPU . Al contrario, window.onload può richiedere un po ‘di tempo per sparare , quando più risorse esterne devono ancora essere richieste, analizzate e caricate.

►Strumento di prova:

Per osservare la differenza e il modo in cui il browser di scelta implementa i gestori di eventi sopra citati, è sufficiente inserire il seguente codice all’interno del del documento.

  

►Result:

Ecco il comportamento risultante, osservabile per Chrome v20 (e probabilmente i browser più attuali).

  • Nessun evento document.onload .
  • onload si onload due volte quando viene dichiarato all’interno di , una volta quando viene dichiarato all’interno di (dove l’evento agisce come document.onload ).
  • contare e agire in base allo stato del contatore consente di emulare entrambi i comportamenti degli eventi.
  • In alternativa, dichiara il gestore di eventi window.onload entro i confini dell’elemento HTML- .

► Esempio di progetto:

Il codice sopra è preso dal codebase di questo progetto ( index.html e keyboarder.js ).


Per un elenco di gestori di eventi dell’object window , fare riferimento alla documentazione MDN.

Secondo i documenti HTML di analisi: la fine ,

  1. Il browser analizza l’origine HTML ed esegue script differiti.

  2. Un DOMContentLoaded viene inviato al document quando tutto l’HTML è stato analizzato ed eseguito. L’evento bolle alla window .

  3. Il browser carica risorse (come immagini) che ritardano l’evento di caricamento.

  4. Un evento di load viene inviato alla window .

Pertanto, l’ordine di esecuzione sarà

  1. DOMContentLoaded eventi DOMContentLoaded della window nella fase di acquisizione
  2. DOMContentLoaded eventi di document DOMContentLoaded
  3. DOMContentLoaded eventi DOMContentLoaded della window nella fase della bolla
  4. load listener di eventi (incluso il gestore di eventi onload ) della window

Un listener di eventi con load bolle (incluso il gestore di eventi onload ) nel document non dovrebbe mai essere invocato. È ansible richiamare solo i listener di load , ma a causa del carico di una sotto-risorsa come un foglio di stile, non a causa del carico del documento stesso.

 window.addEventListener('DOMContentLoaded', function() { console.log('window - DOMContentLoaded - capture'); // 1st }, true); document.addEventListener('DOMContentLoaded', function() { console.log('document - DOMContentLoaded - capture'); // 2nd }, true); document.addEventListener('DOMContentLoaded', function() { console.log('document - DOMContentLoaded - bubble'); // 2nd }); window.addEventListener('DOMContentLoaded', function() { console.log('window - DOMContentLoaded - bubble'); // 3rd }); window.addEventListener('load', function() { console.log('window - load - capture'); // 4th }, true); document.addEventListener('load', function(e) { /* Filter out load events not related to the document */ if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0) console.log('document - load - capture'); // DOES NOT HAPPEN }, true); document.addEventListener('load', function() { console.log('document - load - bubble'); // DOES NOT HAPPEN }); window.addEventListener('load', function() { console.log('window - load - bubble'); // 4th }); window.onload = function() { console.log('window - onload'); // 4th }; document.onload = function() { console.log('document - onload'); // DOES NOT HAPPEN }; 

Aggiungi listener di eventi

  

Update March 2017

1 JavaScript alla vaniglia

 window.addEventListener('load', function() { console.log('All assets are loaded') }) 

2 jQuery

 $(window).on('load', function() { console.log('All assets are loaded') }) 

In bocca al lupo.

In Chrome, window.onload è diverso da , mentre sono uguali sia in Firefox (versione 35.0) che in IE (versione 11).

Puoi esplorarlo con il seguente frammento:

          Page contents go here.   

E vedrai sia “window loaded” (che viene prima) che “body onload” nella console di Chrome. Tuttavia, vedrai solo “body onload” in Firefox e IE. Se si esegue ” window.onload.toString() ” nelle console di IE e FF, verrà visualizzato:

“function onload (event) {bodyOnloadHandler ()}”

il che significa che l’assegnazione “window.onload = function (e) …” viene sovrascritta.

window.onload tuttavia sono spesso la stessa cosa. Allo stesso modo body.onload diventa window.onload in IE.

window.onload e onunload sono scorciatoie per document.body.onload e document.body.onunload

document.onload e onload handler su tutto il tag html sembra essere riservato ma mai triggersto

onload ‘ nel documento -> true

Window.onload è lo standard, tuttavia, il browser Web in PS3 (basato su Netfront) non supporta l’object finestra, quindi non è ansible utilizzarlo lì.