Call javaScript Function After Whole Page Load Complete

Call/Execute javascript function after the whole web page is loaded. Here you will learn two ways to call javascript function after the whole web page is loaded.

When working with jQuery/JavaScript, there are situations where you may need to load the entire web page after calling or executing JavaScript functions.

Approach 1:

You also know that in HTML <body> tag holds the actual content that is used to display to the users. Using the onload with HTML <body> tag, you can execute the javascript function after the whole page is loaded. The onload event occurs whenever the element has finished loading. You can do like something:

<body onload="functionName">

Here is an example of how to use the onload event to call a JavaScript function:

<!DOCTYPE html>
<html>
<head>
	<title> Execute Javascript Function After Page Load Example </title>
</head>
<body onload="afterPageLoad()">

	<h1>Welcome to tutsmake.com</h1>

	<p> Execute Javascript Function After Page Load Example </p>
</body>
<script language='javascript'>
function afterPageLoad(){
   alert('hello');
}
</script>
</html>

Approach 2:

You can use the javascript window onload property. Which is used to call/execute javascript functions after the whole page is completely loaded. You can do like something:

window.onload = function afterWebPageLoad() {

    // Function to be executed
} 

Here is an example of how to use the window.onload event to call a JavaScript function:

<!DOCTYPE html>
<html>
<head>
	<title> Execute Javascript Function After Page Load Example </title>
</head>
<body>

	<h1>Welcome to tutsmake.com</h1>

	<p> Execute Javascript Function After Page Load Example </p>
</body>
<script language='javascript'>
function afterPageLoad(){
   alert('hello');
}
window.onload = function afterPageLoad();
</script>
</html>

Recommended JavaScript Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *