By Vishal Basumatary in javascript — Mar 24, 2023

call a function when page is loaded

Calling a Function When Page is Loaded in HTML

If you want to execute a particular function when a web page is loaded, there are several ways to do it in HTML. Here are some of them:

Method 1: Using the onload Attribute

The simplest way to call a function when a web page is loaded is to add the onload attribute to the <body> tag and set its value to the name of the function you want to call:


  <body onload="myFunction()">
    ...
  </body>

In this example, the myFunction() function will be called as soon as the web page is fully loaded.

Method 2: Using the window.onload Event Handler

You can also use the window.onload event handler to call a function when the web page is loaded. This method is more flexible than using the onload attribute because it allows you to attach multiple functions to the event:


  <script>
    window.onload = function() {
      myFunction1();
      myFunction2();
      myFunction3();
    };
  </script>

In this example, the myFunction1(), myFunction2(), and myFunction3() functions will be called in that order when the web page is loaded.

Method 3: Using the jQuery Library

If you are using the jQuery library, you can use the $(document).ready() method to call a function when the web page is loaded:


  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      myFunction();
    });
  </script>

In this example, the myFunction() function will be called when the DOM is ready, which means all the HTML elements have been loaded and initialized.

Method 4: Using the DOMContentLoaded Event

The DOMContentLoaded event is fired when the DOM is ready, which means all the HTML elements have been loaded and initialized. You can use this event to call a function when the web page is loaded:


  <script>
    document.addEventListener("DOMContentLoaded", function() {
      myFunction();
    });
  </script>

In this example, the myFunction() function will be called when the DOM is ready.

Conclusion

These are some of the ways to call a function when a web page is loaded in HTML. Choose the method that best suits your needs and coding style.