How to Call a JavaScript Function on Page Load

Calling a JavaScript function on page load is a fundamental technique used in web development to execute specific code as soon as a web page finishes loading. This capability allows developers to initialize variables, set up event listeners, manipulate the DOM, fetch data from APIs, or perform any other desired actions when the page is ready. There are various methods to achieve this, including using the onload attribute in the <body> tag to specify an inline event handler, utilizing the window.onload event, or listening for the DOMContentLoaded event. By employing these techniques, developers can ensure that their JavaScript functions are automatically triggered when the page is loaded, enhancing the interactivity and functionality of their web applications.

01. Inline Event Handler
02. Window "onload" Event
03. "DOMContentLoaded" Event
04. Multiple Function Calling

01. Inline Event Handler:

You can use the onload attribute in the <body> tag to specify a function that should be executed when the page finishes loading. Here's an example:

<!DOCTYPE html>
<html>
<head>
  <title>How to Call a JavaScript Function on Page Load</title> 
</head>

<body onload="functionOnPageLoad()">
  
  <!-- Rest of HTML content -->

<script>
  function functionOnPageLoad() {
    alert("This is working.");
  }
</script>

</body>
</html>

when the page finishes loading, the functionOnPageLoad() the function will be called.

Read Also:

02. Window "onload" Event:

You can use the window.onload event handler in JavaScript to call a function when the entire page, including all its resources, finishes loading. In this case, when the page has finished loading, the function specified inside window.onload will be executed. Here's an example:

<!DOCTYPE html>
<html>
<head>
  <title>How to Call a JavaScript Function on Page Load</title> 
</head>

<body>
  
  <!-- Rest of HTML content -->

<script>
  window.onload = function() {
    alert("This is working.");
  }
</script>

</body>
</html>

Read Also:

03. "DOMContentLoaded" Event:

If you only need to ensure that the DOM (Document Object Model) is ready, rather than waiting for all resources to load, you can use the DOMContentLoaded event. It triggers when the HTML is parsed and the DOM is ready to be manipulated. The function inside document.addEventListener will be called when the DOM is ready. Here's an example:

<!DOCTYPE html>
<html>
<head>
  <title>How to Call a JavaScript Function on Page Load</title> 
</head>

<body>
  
  <!-- Rest of HTML content -->

<script>
  document.addEventListener('DOMContentLoaded', function() {
    alert("This is working.");
  });
</script>

</body>
</html>

04. Multiple Function Calling:

If you want to execute multiple functions on page load using the inline event handler approach, you can separate them with semicolons (;) inside the onload attribute. Here's an example:

<!DOCTYPE html>
<html>
<head>
  <title>How to Call a JavaScript Function on Page Load</title> 
</head>

<body onload="loadFunction1();loadFunction2();">
  
  <!-- Rest of HTML content -->

  
  
<script>
  function loadFunction1() {
     alert("loadFunction1 is working."); 
  };
  function loadFunction2() {
    alert("loadFunction2 is working.");
  };
  
  <!-- alert("This is working."); -->
</script>

</body>
</html>

Read Also:

Archive