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


Way One

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


<!DOCTYPE html> 
<html> 
    <head> 
        <title>Call JavaScript Function After Page Load Complete</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>


Second Way

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


<!DOCTYPE html> 
<html> 
    <head> 
        <title>Call JavaScript Function After Page Load Complete</title> 
    </head> 
    <body> 
        <h1>Welcome to Rathorji</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...