How to load jQuery code after loading the page?

Method 1: Using the on() method with the load event: The on() method in jQuery is used to attach an event handler for any event to the selected elements. The window object is first selected using a selector and the on() method is used on this element.
The ‘load’ event fires whenever the whole page has finished loading including other resources like the stylesheets and images. This event is checked for bypassing it to the on() method. The function to be executed can be then invoked in the second parameter of this method. This will now invoke the function after the page has completed loading.

Syntax:

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

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to load jQuery code
        after page loading?
    </title>
      
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to load jQuery code
        after page loading?
    </b>
      
    <p>
        The current datetime is:
        <span class="date"></span>
    </p>
      
    <script type="text/javascript">
        $(window).on('load', showDatetime());
      
        function showDatetime() {
            document.querySelector(".date").textContent
                    = new Date();
        }
    </script>
</body>
  
</html>

chevron_right


Output: After the page loaded:
onload

Method 2: Using the ready() method: The ready() method in jQuery is used to execute code whenever the DOM becomes safe to be manipulated. It accepts a handler that can be passed with the function required to be executed. It will now invoke the function after the page has completed loading.

Syntax:

$(document).ready( functionTobeLoaded() )

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to load jQuery code
        after page loading?
    </title>
      
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to load jQuery code
        after page loading?
    </b>
      
    <p>
        The current datetime is:
        <span class="date"></span>
    </p>
  
    <script type="text/javascript">
        $(document).ready(
            showDatetime()
        );
      
        function showDatetime() {
        document.querySelector(".date").textContent
                = new Date();
        }
    </script>
</body>
  
</html>

chevron_right


Output: After the page loaded
ready



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.