JavaScript Call Function After Whole Page Load

Call/execute javascript function after the whole web page is loaded; Through this tutorial, i am going to show you two methods to call javascript function after the whole web page is loaded.

JavaScript Call Function After Whole Page Load Complete

There are two methods to call function after whole page load completely; as shown below:

1 – First Method
2 – Second Method

1 – First Method

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.

Looks like this:

<body onload="functionName">

See the following first example for call javascript function after page load complete; as shown below:

<!DOCTYPE html> 
<html> 
<head> 
	<title> Execute Javascript Function After Page Load Example </title> 
</head> 
<body onload="afterPageLoad()"> 
	
	<h1>Welcome to laratutorials.com</h1> 
	
	<p> Execute Javascript Function After Page Load Example </p> 
</body> 
<script language='javascript'>
function afterPageLoad(){
   alert('hello');
}
</script>
</html>

2 – Second Method

Using thejavascript window onload property, you can call/execute javascript functions after the whole page is completely loaded.

Looks like this:

window.onload = function afterWebPageLoad() { 
  
    // Function to be executed 
}

See the following second example for call javascript function after page load complete; as shown below:

<!DOCTYPE html> 
<html> 
<head> 
	<title> Execute Javascript Function After Page Load Example </title> 
</head> 
<body> 
	
	<h1>Welcome to laratutorials.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>

JavaScript Call Function After Whole Page Load