In diesem Beitrag werden wir sehen, wie man JavaScript-Code nach dem Laden einer Seite mit reinem JS und jQuery ausführt.
Die JavaScript- und jQuery-Bibliothek bietet mehrere Möglichkeiten, eine Funktion auszuführen, nachdem das DOM fertig ist. Dieser Beitrag bietet einen detaillierten Überblick über die Methoden, um dies zu erreichen.
JavaScript
In reinem JavaScript ist die Standardmethode, um eine vollständig geladene Seite zu erkennen, die Verwendung der onload-Event-Handler-Eigenschaft. Das load-Ereignis zeigt an, dass alle Elemente auf der Webseite geladen wurden. Es kann mit dem window.onload in JavaScript aufgerufen werden.
|
1
2
3
|
window.onload = function() {
alert(‚Seite wird geladen‘);
};
|
Bearbeiten in JSFiddle
Der folgende Code verwendet die addEventListener()-Methode, um auf das load-Ereignis zu warten und eine vollständig geladene Seite zu erkennen. Dies entspricht dem obigen Code.
|
1
2
3
|
Window.addEventListener(„load“, function() {
alert(‚Seite wird geladen‘);
});
|
Bearbeiten in JSFiddle
Obwohl nicht empfohlen, kann man auch eine JavaScript-Funktion beim Laden der Seite mit dem HTML <body>-Tag aufrufen. Die Idee ist, das Attribut onload im Body-Tag zu verwenden.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=“loaded();“ ></body>
<script>
function loaded() {
alert(‚Seite wird geladen‘);
}
</script>
</html>
|
Bearbeiten in JSFiddle
Beachten Sie, dass das DOMContentLoaded-Ereignis besser geeignet ist, wenn Sie Ihren Code nur ausführen möchten, wenn das DOM vollständig geladen ist, ohne darauf zu warten, dass Stylesheets und Bilder fertig geladen sind.
|
1
2
3
|
Document.addEventListener(„DOMContentLoaded“, function() {
alert(‚Seite wird geladen‘);
});
|
Bearbeiten in JSFiddle
jQuery
Mit jQuery können Sie JavaScript-Code ausführen, sobald das DOM vollständig geladen ist, indem Sie die Methode .ready() verwenden, die window.onload in JavaScript entspricht. Es kann jede der folgenden Syntaxen verwendet werden, die alle gleich sind:
- $(document).ready(handler)
- $(„document“).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‚Seite wird geladen‘);
});
|
Bearbeiten in JSFiddle
Alternativ kann $(handler) aufgerufen werden, was der obigen Syntax entspricht:
|
1
2
3
|
$(function() {
alert(‚Seite wird geladen‘);
});
|
Bearbeiten in JSFiddle
Das load-Ereignis auf dem window-Objekt kann man auch mit der $(window).on("load", handler)-Methode beobachten.
|
1
2
3
|
$(window).bind(‚load‘, function() {
alert(‚Seite wird geladen‘);
});
|
Bearbeiten in JSFiddle