By Vishal Basumatary in javascript — Mar 25, 2023

javascript start function on load

Javascript Start Function on Load

If you want to run a Javascript function as soon as the page loads, you can use the window.onload event. This event fires when all the elements on the page have finished loading.

Method 1: Inline Script

The simplest way to use window.onload is to add an inline script tag to your HTML code:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      window.onload = function() {
        alert("The page has loaded!");
      }
    </script>
  </body>
</html>

Method 2: External Script

You can also use an external Javascript file and add the window.onload event listener to that file. Here's an example:

In your HTML code:

<html>
  <head>
    <title>My Page</title>
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

In your external Javascript file (myscript.js):

function myFunction() {
  alert("The page has loaded!");
}

window.onload = myFunction;

Make sure that the Javascript file is loaded after the HTML code, so that the window.onload event listener is attached only after it has been defined.

You can also use other Javascript events to start a function on load, such as document.addEventListener("DOMContentLoaded", function(event) { ... }); which fires when the DOM has finished loading, or $(document).ready(function(){ ... }); if you are using jQuery.