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=
"https://code.jquery.com/jquery-3.3.1.min.js">
</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=
"https://code.jquery.com/jquery-3.3.1.min.js">
</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=
"https://code.jquery.com/jquery-3.3.1.min.js">
</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:
Similar Reads
How to Execute JavaScript After Page Load? When a webpage loads, it takes time. The browser reads the HTML, builds the Document Object Model (DOM), and starts rendering the page. If your JavaScript runs too early, it might try to change elements that aren't ready yet, causing errors. Running JavaScript after the page loads makes sure all the
5 min read
How to load more feature using jQuery ? Bootstrap provides a lot of useful features that we generally integrate into our websites. One of them is the "Load More" feature which we can see on every second website we visit. The load more feature is used to load more or show more content available on the webpage to the visitor. Initially, hal
4 min read
How to check if a jQuery plugin is loaded? There are multiple ways by which we can simply check whether the jQuery plugins are loaded successfully or not using jQuery. We can also check whether a particular function within the plugin is accessible or not. This tutorial will demonstrate how to check if a jQuery plugin is loaded or not. Step 1
3 min read
jQuery Mobile Loader loading() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will learn to use the jQuery Mobile Loader loading() Method. The jQuery Mobile Loader loading() Method is used to show or hide the loader messag
2 min read
How to reload page after specific seconds in jQuery ? A page can be reloaded after a specific number of seconds in jQuery using two approaches. Using location.reload() Method Using history.go(0) Method Using location.reload() Method: This method is used to reload the current page imitating the action of the refresh button of the browser. It has an opti
3 min read
How to load local jQuery file in case CDN is not available ? jQuery is a lightweight, "write less, do more" Â JavaScript library. Â jQuery helps to write JavaScript as simply as easily possible. It is effective in converting a few lines of code in JavaScript to one single line. Â It also simplifies tasks like Ajax calls and DOM (Document Object Model). The jQuer
3 min read