Window.onload vs $(document).ready dans jQuery

Sheeraz Gul 15 février 2024
  1. Evénement JavaScript onload
  2. Événement jQuery ready
  3. Différences entre les événements Window.onload et $(document).ready
Window.onload vs $(document).ready dans jQuery

Le onload est un gestionnaire d’événements utilisé pour exécuter la fonction requise lorsque l’événement onload se produit, et le $(document).ready se produit lorsque le document object model du DOM a été chargé. Ce tutoriel montre comment utiliser les méthodes onload et ready() dans jQuery.

Evénement JavaScript onload

La fonction onload fonctionne lorsque l’objet est entièrement chargé avec ses ressources. Il est principalement utilisé lorsque nous avons besoin d’exécuter une fonction lorsqu’une page Web est entièrement chargée, y compris toutes les ressources.

L’événement onload est également utilisé pour vérifier les cookies. Il peut également être utilisé pour vérifier les visiteurs, la version et le type de navigateur lorsqu’une version correcte de la page est chargée en fonction des informations du navigateur de l’utilisateur.

La fonction onload est utilisée dans le corps. Tous les navigateurs principalement utilisés prennent en charge cette méthode car il s’agit d’une fonction JavaScript intégrée.

La syntaxe de la fonction onload est :

<body onload="Method">

Essayons un exemple simple qui affiche un message d’alerte lorsque la page est entièrement chargée :

<!DOCTYPE html>
<html>
   <head>
      <style>
         #OnloadDiv {
         background-color: #DAA520;
         width: 800px;
         height: 300px;
         margin-left: 120px;
         text-align: center;
         }
      </style>
   </head>
   <body onload="DemoFunction()">
      <div id="OnloadDiv">
         <h2>Hello this is demonstration of onload event in jQuery!</h2>
         <h3>Once the page is fully loaded, the Demo Function will be loaded</h3>
      </div>
      <script>
         function DemoFunction() {
             alert("Hello, This is alert from delftstack.com!");
         }
      </script>
   </body>
</html>

Le code ci-dessus chargera un événement alert lorsque la page est entièrement chargée. Voir la sortie :

Événement OnLoad

Comme mentionné ci-dessus, l’événement onload peut être utilisé pour vérifier les cookies. Essayons un exemple pour vérifier les cookies :

<!DOCTYPE html>
<html>
   <head>
      <style>
         #Cookiediv {
         background-color: #DAA520;
         text-align: center;
         width: 600px;
         height: 200px;
         margin-left: 120px;
         }
         #Cookie_Status {
         font-size: large;
         font-weight: bold;
         color: White;
         }
      </style>
   </head>
   <body onload="checkCookies()">
      <div id="Cookiediv">
         <h2>See the answer below if the cookies are enabled or disabled?</h2>
         <p id="Cookie_Status"></p>
      </div>
      <script>
         function checkCookies() {
         var Cookie_text = "";
         if (navigator.cookieEnabled == true) {
             Cookie_text = "Cookies are Enabled.";
         }
         else {
             Cookie_text = "Cookies are Disabled.";
         }
         document.getElementById("Cookie_Status").innerHTML = Cookie_text;
         }
      </script>
   </body>
</html>

Le code ci-dessus vérifiera si les cookies sont activés ou non lorsque la page est complètement chargée :

Événement Cookies OnLoad

Événement jQuery ready

L’événement ready se produit lorsque le DOM est chargé. Cet événement se produit lorsque le document est entièrement prêt, pratique pour les méthodes et événements jQuery.

L’événement ready n’est pas utilisé dans la balise <body onload="">. Essayons un exemple pour montrer comment l’événement $(document).ready fonctionne dans jQuery :

<html>
   <head>
      <title>jQuery Ready Method</title>
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script>
         $(document).ready(function() {
             $("#Demo_Div").click(function() {
                 alert("Hello, This is delftstack.com");
             });
         });
      </script>
   </head>
   <body>
      <div id = "Demo_Div">
         Click the div to see the alert.
      </div>
   </body>
</html>

Le code ci-dessus demandera le clic une fois que le document sera prêt. Il affichera une alerte une fois que nous cliquons sur le document est prêt.

Voir la sortie :

Document jQuery prêt

Différences entre les événements Window.onload et $(document).ready

Bien que window.onload et $(document).ready fonctionnent de manière similaire, ils présentent encore quelques différences, qui sont indiquées ci-dessous :

  1. La différence évidente est que window.onload est un pur événement JavaScript ; c’est pourquoi il est disponible dans la plupart des bibliothèques et des navigateurs. D’autre part, $(document).ready est un événement jQuery, ce qui signifie qu’il n’est disponible que dans la bibliothèque jQuery.

  2. L’autre différence principale est que window.onload attendra que le contenu, comme les images et les vidéos, se charge ; c’est pourquoi cela prend beaucoup de temps. Jusqu’à ce que les données volumineuses soient chargées, aucun autre code ne sera exécuté.

    D’autre part, $(document).ready est basé sur DOM. Une fois le DOM chargé, il exécutera l’autre code ; il n’attendra pas que les autres éléments se chargent.

  3. window.onload prend plus de temps que $(document).ready.

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