How to load jQuery code after loading the page?
Last Updated :
12 Jan, 2024
In this article, we are going to discuss the different ways of loading the jQuery code after loading the page. The methods to accomplish this task are listed below:
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 with the load event and a callback function to be called on the occurrence of this event.
Syntax:
$(window).on('load', functionTobeLoaded() )
Example: The below example implements the on() method to load jQuery after the page gets loaded.
HTML
<!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:
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: The below example will illustrate the use of the ready() method to load jQuery after the page is loaded.
HTML
<!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:
Method 3: Using the load() method
We can also use the load method to load the jQuery after loading the page by passing a callback function to execute the jQuery.
Syntax:
$(document).load(() => {});
Example: The below code example will explain the use of the load() method to load jQuery after the page gets loaded.
HTML
<!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).load(
showDatetime()
);
function showDatetime() {
document.querySelector(".date").
textContent
= new Date();
}
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...