Créer un événement de chargement sur la page dans jQuery

Sheeraz Gul 15 février 2024
Créer un événement de chargement sur la page dans jQuery

La méthode on() avec l’événement load est utilisée pour créer un événement de chargement sur la page dans jQuery. Ce didacticiel montre comment créer un événement de chargement sur la page dans jQuery.

Créer un événement de chargement sur la page dans jQuery

Auparavant, jQuery avait la fonction load(), qui fonctionnait comme un événement de chargement sur page ou document.ready, mais cette méthode était obsolète dans la version 1.8 de jQuery et supprimée dans la version 3.0. Désormais, la méthode on() peut être utilisée avec l’événement load pour effectuer une opération une fois la page complètement chargée.

La méthode on() avec l’événement load fonctionne lorsque tout est chargé sur la page, y compris les feuilles de style, les images, les vidéos, etc.

La syntaxe de la méthode on() est :

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

Où la fonction sera appelée lorsque la page sera complètement chargée. Essayons un exemple :

<!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>

Le code ci-dessus alertera le message lorsque la page sera entièrement chargée. Voir la sortie :

jQuery sur l&rsquo;alerte de chargement de la page

Essayons un autre exemple pour afficher l’heure actuelle une fois la page entièrement chargée. Voir exemple :

<!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>

Le code ci-dessus affichera l’heure actuelle une fois la page entièrement chargée. Voir la sortie :

jQuery au chargement de la page

Auteur: Sheeraz Gul
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

Article connexe - jQuery Event