Erstellen ein On-Page-Ladeereignis in jQuery

Sheeraz Gul 15 Februar 2024
Erstellen ein On-Page-Ladeereignis in jQuery

Die Methode on() mit dem Event load wird verwendet, um ein Onpage-Load-Event in jQuery zu erzeugen. Dieses Tutorial zeigt, wie Sie ein On-Page-Ladeereignis in jQuery erstellen.

Erstellen Sie ein On-Page-Ladeereignis in jQuery

Früher hatte jQuery die Funktion load(), die als On-Page-Load- oder document.ready-Event funktionierte, aber diese Methode wurde in jQuery Version 1.8 abgelehnt und in Version 3.0 entfernt. Nun kann die Methode on() mit dem Event load verwendet werden, um eine Operation auszuführen, sobald die Seite vollständig geladen ist.

Die on()-Methode mit dem load-Event funktioniert, wenn alles auf der Seite geladen ist, inklusive Stylesheets, Bilder, Videos etc.

Die Syntax für die Methode on() lautet:

$(window).on('load', functionforOnPageLoad() )

Wo die Funktion aufgerufen wird, wenn die Seite vollständig geladen ist. Versuchen wir es an einem Beispiel:

<!DOCTYPE html>
<html>

<head>
    <title> jQuery On Page Load </title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>

<body>

    <script type="text/javascript">
        $(window).on('load', AlertMessage());

        function AlertMessage() {
            alert("Hello This is Page is fully loaded");
        }
    </script>
</body>

</html>

Der obige Code alarmiert die Nachricht, wenn die Seite vollständig geladen ist. Siehe Ausgabe:

jQuery On Page Load Alert

Lassen Sie uns ein weiteres Beispiel ausprobieren, um die aktuelle Uhrzeit anzuzeigen, sobald die Seite vollständig geladen ist. Siehe Beispiel:

<!DOCTYPE html>
<html>

<head>
    <title> jQuery On Page Load </title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>
<body>

    <p> The current Time is: </p>
    <span class="date"></span>

    <script type="text/javascript">
        $(window).on('load', ShowCurrentTime());

        function ShowCurrentTime() {
            document.querySelector("span").textContent = new Date();
        }
    </script>
</body>
</html>

Der obige Code zeigt die aktuelle Uhrzeit an, sobald die Seite vollständig geladen ist. Siehe Ausgabe:

jQuery On Page Load

Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Verwandter Artikel - jQuery Event