Skip to content
Related Articles

Related Articles

How to load jQuery code after loading the page?
  • Last Updated : 21 Nov, 2019

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:




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

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:




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

Output: After the page loaded
ready

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :