window.onload vs document.onload en JavaScript

Window Onload Vs Document Onload En Javascript



En Javascript, ' fenêtre.onload ' et ' document.onload ' sont deux événements souvent utilisés pour s'assurer que la page est entièrement chargée avant d'exécuter du code. L'événement document.onload a lieu avant l'événement window.onload lorsque le document HTML entier a été chargé, tandis que l'événement window.onload se produit après lorsque tout sur la page a été chargé, y compris les illustrations.

Ce blog montrera la différence entre window.onload et document.onload en JavaScript.

window.onload vs document.onload en JavaScript

Les ' fenêtre.onload ” est déclenché lorsque la page entière (y compris ses ressources) a fini de se charger. Cela signifie que vous pouvez utiliser cet événement pour vous assurer que la page est entièrement chargée avant d'exécuter tout code reposant sur le contenu de la page.







Les ' document.onload ' est similaire à l'événement window.onload, mais il ne se déclenche que lorsque le DOM du document (la structure du contenu de la page) a fini de se charger. Cela signifie que vous pouvez utiliser cet événement pour vous assurer que le contenu de la page est entièrement chargé et prêt à être manipulé avant d'exécuter du code.



Quelle est la meilleure approche à suivre ?

En général, c'est une bonne idée d'utiliser un document.onload au lieu de window.onload si vous avez seulement besoin de vous assurer que le contenu de la page est entièrement chargé avant d'exécuter votre code. En effet, document.onload se déclenchera plus rapidement qu'un window.onload, ce qui peut améliorer les performances de votre code. Toutefois, si vous devez vous assurer que les ressources de la page (telles que les images et les feuilles de style) sont entièrement chargées avant d'exécuter votre code, vous devez utiliser window.onload à la place.



Comment utiliser window.onload vs document.onload en JavaScript ?

Dans l'exemple donné, nous verrons comment ces événements identifient le chargement du document et le chargement de la fenêtre avant d'exécuter du code.





Appeler le ' document.onload ” qui vous informe que le document est chargé à l'aide d'un message alert() :

document. en charge = alerte ( 'document_onload' ) ;

Appeler le ' fenêtre.onload ” et affectez-lui le message résultant d'une méthode alert() :



la fenêtre. en charge = alerte ( 'window_onload' ) ;

Comme vous pouvez le voir, lorsque la page est actualisée, le premier document est chargé, puis la méthode window onload est invoquée lorsque la page entière a fini de se charger :

C'est tout sur les événements window.onload et document.onload en JavaScript.

Conclusion

Les ' fenêtre.onload ' et ' document.onload ' sont deux événements JavaScript pour s'assurer que la page complète se charge avant d'exécuter du code. Le document.onload se déclenchera plus rapidement que window.onload, ce qui peut améliorer les performances du code. Ce blog a démontré la différence entre window.onload et document.onload en JavaScript.