window.onload vs document.onload i JavaScript

Window Onload Vs Document Onload I Javascript



I JavaScript, ' window.onload ' og ' document.onload ” er to hændelser, der ofte bruges til at sikre, at siden er fuldt indlæst, før der køres nogen kode. Document.onload-hændelsen finder sted før window.onload hændelsen, når hele HTML-dokumentet er indlæst, hvorimod window.onload hændelsen opstår efterfølgende, når alt på siden er indlæst, inklusive illustrationer.

Denne blog vil demonstrere forskellen mellem window.onload og document.onload i JavaScript.

window.onload vs document.onload i JavaScript

Det ' window.onload ” hændelse udløses, når hele siden (inklusive dens ressourcer) er færdig med at indlæse. Det betyder, at du kan bruge denne begivenhed til at sikre, at siden er fuldt indlæst, før du kører nogen kode, der er afhængig af sidens indhold.







Det ' document.onload ” hændelse ligner window.onload, men den udløses først, når dokumentets DOM (strukturen af ​​sidens indhold) er færdig med at indlæse. Dette betyder, at du kan bruge denne begivenhed til at sikre, at sidens indhold er fuldt indlæst og klar til at blive manipuleret, før du kører nogen kode.



Hvad er den bedste tilgang at følge?

Generelt er det en god idé at bruge en document.onload i stedet for window.onload, hvis du kun skal sikre dig, at sidens indhold er fuldt indlæst, før du kører din kode. Dette skyldes, at document.onload udløses hurtigere end en window.onload, hvilket kan forbedre ydeevnen af ​​din kode. Men hvis du skal sikre dig, at sidens ressourcer (såsom billeder og stylesheets) er fuldt indlæst, før du kører din kode, så skal du bruge window.onload i stedet.



Hvordan bruger man window.onload vs document.onload i JavaScript?

I det givne eksempel vil vi se, hvordan disse hændelser identificerer dokumentindlæsningen og vinduesindlæsningen, før der køres nogen kode.





Ring til ' document.onload ” hændelse, der informerer dig om, at dokumentet er indlæst ved hjælp af en advarsel()-meddelelse:

dokument. påfyldning = alert ( 'document_onload' ) ;

Ring til ' window.onload ” hændelse og tildel den resulterende besked fra en alert()-metode til den:



vindue. påfyldning = alert ( 'window_onload' ) ;

Som du kan se, når siden er opdateret, indlæses det første dokument, og derefter aktiveres vinduesindlæsningsmetoden, når hele siden er færdig med at indlæse:

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

Konklusion

Det ' window.onload ' og ' document.onload ” er to JavaScript-hændelser for at sikre, at hele siden indlæses, før der udføres nogen kode. Document.onload udløses hurtigere end window.onload, hvilket kan forbedre kodens ydeevne. Denne blog demonstrerede forskellen mellem window.onload og document.onload i JavaScript.