window.onload vs document.onload i JavaScript

Window Onload Vs Document Onload I Javascript



I JavaScript, ' window.onload ' og ' document.onload ” er to hendelser som ofte brukes for å sikre at siden er fulllastet før du kjører noen kode. Document.onload-hendelsen finner sted før window.onload-hendelsen når hele HTML-dokumentet er lastet inn, mens window.onload-hendelsen skjer etterpå når alt på siden er lastet inn, inkludert illustrasjoner.

Denne bloggen vil demonstrere forskjellen mellom window.onload og document.onload i JavaScript.

window.onload vs document.onload i JavaScript

« window.onload ”-hendelsen utløses når hele siden (inkludert ressursene) er ferdig lastet. Dette betyr at du kan bruke denne hendelsen for å sikre at siden er fullastet før du kjører noen kode som er avhengig av sidens innhold.







« document.onload ”-hendelsen ligner på window.onload, men den utløses bare når dokumentets DOM (strukturen til sidens innhold) er ferdig lastet. Dette betyr at du kan bruke denne hendelsen til å sikre at sidens innhold er fulllastet og klar til å bli manipulert før du kjører noen kode.



Hva er den beste tilnærmingen å følge?

Generelt er det en god idé å bruke en document.onload i stedet for window.onload hvis du bare trenger å sikre at sidens innhold er fulllastet før du kjører koden. Dette er fordi document.onload vil utløses raskere enn en window.onload, noe som kan forbedre ytelsen til koden din. Men hvis du trenger å sørge for at sidens ressurser (som bilder og stilark) er fulllastet før du kjører koden, bør du bruke window.onload i stedet.



Hvordan bruke window.onload vs document.onload i JavaScript?

I det gitte eksemplet vil vi se hvordan disse hendelsene identifiserer dokumentbelastningen og vindusbelastningen før vi kjører noen kode.





Ring ' document.onload ”-hendelse som informerer deg om at dokumentet er lastet ved hjelp av en varsel()-melding:

dokument. på Last = varsling ( 'document_onload' ) ;

Ring ' window.onload ”-hendelse og tilordne den resulterende meldingen til en varslings()-metode til den:



vindu. på Last = varsling ( 'window_onload' ) ;

Som du kan se, når siden oppdateres, lastes det første dokumentet inn, og deretter startes vindupålastingsmetoden når hele siden er ferdig lastet:

Det handler om hendelsene window.onload og document.onload i JavaScript.

Konklusjon

« window.onload ' og ' document.onload ” er to JavaScript-hendelser for å sikre at hele siden lastes inn før du kjører noen kode. Document.onload vil utløses raskere enn window.onload, noe som kan forbedre ytelsen til koden. Denne bloggen demonstrerte forskjellen mellom window.onload og document.onload i JavaScript.