Call JavaScript Function After Page Load Complete

In this tutorial, we learn how to Execute the javascript function after the web page is loaded. Here you will learn two ways to call the call javascript function on page load.

When you work with jQuery/javascript any project, sometimes you need to load the web page and after that jquery run script after everything loaded.

1. First Simple Way

You also know that in HTML tag holds the actual content that is used to display to the users. Using the onload javascript with HTML tag, you can call javascript function after page load complete. The onload javascript event whenever the element has finished loading and jquery call function after load HTML.

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>Call JavaScript Function After Page Load Complete - phpcodingstuff.com</title> 
</head> 
 
<body onload="afterPageLoad()"> 
     
    <h1>Welcome to phpcodingstuff.com</h1> 
     
    <p>call javascript function before page load complete</p> 
</body> 
 
<script language='javascript'>
function afterPageLoad(){
   alert('Hello World');
}
</script>
 
</html>

2. Second Way

You can use the onload javascript property. Which is used to call the javascript function after page load complete.

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>Call JavaScript Function After Page Load Complete - phpcodingstuff.com</title> 
</head> 
 
<body> 
     
    <h1>Welcome to tutsmake.com</h1> 
     
    <p>call javascript function before page load complete</p> 
</body> 
 
<script language='javascript'>
function afterPageLoad(){
   alert('Hello World');
}
 
window.onload = function afterPageLoad();
 
</script>
 
</html>

I hope it can help you...

Example JQuery

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.