window.onload vs. document.onload in JavaScript

Window Onload Vs Document Onload In Javascript



In JavaScript „ window.onload ' und ' document.onload “ sind zwei Ereignisse, die häufig verwendet werden, um sicherzustellen, dass die Seite vollständig geladen ist, bevor Code ausgeführt wird. Das document.onload-Ereignis findet vor dem window.onload-Ereignis statt, wenn das gesamte HTML-Dokument geladen wurde, während das window.onload-Ereignis danach auftritt, wenn alles auf der Seite geladen wurde, einschließlich Illustrationen.

Dieser Blog wird den Unterschied zwischen window.onload und document.onload in JavaScript demonstrieren.

window.onload vs. document.onload in JavaScript

Die ' window.onload “-Ereignis wird ausgelöst, wenn die gesamte Seite (einschließlich ihrer Ressourcen) vollständig geladen wurde. Dies bedeutet, dass Sie dieses Ereignis verwenden können, um sicherzustellen, dass die Seite vollständig geladen ist, bevor Sie Code ausführen, der auf den Inhalt der Seite angewiesen ist.







Die ' document.onload ”-Ereignis ähnelt dem window.onload, aber es wird nur ausgelöst, wenn das DOM des Dokuments (die Struktur des Seiteninhalts) vollständig geladen ist. Dies bedeutet, dass Sie dieses Ereignis verwenden können, um sicherzustellen, dass der Inhalt der Seite vollständig geladen und bereit zur Bearbeitung ist, bevor Sie Code ausführen.



Was ist der beste Ansatz?

Im Allgemeinen ist es eine gute Idee, document.onload anstelle von window.onload zu verwenden, wenn Sie nur sicherstellen müssen, dass der Inhalt der Seite vollständig geladen ist, bevor Sie Ihren Code ausführen. Dies liegt daran, dass document.onload schneller ausgelöst wird als window.onload, was die Leistung Ihres Codes verbessern kann. Wenn Sie jedoch sicherstellen müssen, dass die Ressourcen der Seite (z. B. Bilder und Stylesheets) vollständig geladen sind, bevor Sie Ihren Code ausführen, sollten Sie stattdessen window.onload verwenden.



Wie verwende ich window.onload vs. document.onload in JavaScript?

Im angegebenen Beispiel werden wir sehen, wie diese Ereignisse das Laden von Dokumenten und Fenstern identifizieren, bevor Code ausgeführt wird.





Ruf die ' document.onload ”-Ereignis, das Sie mit einer alert()-Nachricht darüber informiert, dass das Dokument geladen wurde:

dokumentieren. laden = Alarm ( 'document_onload' ) ;

Ruf die ' window.onload ”-Ereignis und weisen Sie ihm die resultierende Nachricht einer alert()-Methode zu:



Fenster. laden = Alarm ( 'window_onload' ) ;

Wie Sie sehen können, wird beim Aktualisieren der Seite das erste Dokument geladen, und dann wird die Methode window onload aufgerufen, wenn die gesamte Seite vollständig geladen ist:

Das ist alles über die Ereignisse window.onload und document.onload in JavaScript.

Fazit

Die ' window.onload ' und ' document.onload “ sind zwei JavaScript-Ereignisse, um sicherzustellen, dass die gesamte Seite geladen wird, bevor Code ausgeführt wird. document.onload wird schneller ausgelöst als window.onload, was die Leistung des Codes verbessern kann. Dieser Blog demonstrierte den Unterschied zwischen window.onload und document.onload in JavaScript.