By Vishal Basumatary in javascript — Mar 25, 2023

javascript onload complete

JavaScript onload Complete

Have you ever visited a website that took forever to load? It can be frustrating and make you want to leave the site altogether. That's where JavaScript's onload event comes into play. This event is triggered when a web page and all its resources have finished loading. In other words, the onload event tells the browser to wait until everything on the page has been loaded before performing any actions.

Using the `onload` Event

The onload event can be used to perform a variety of actions once a web page has finished loading. For example, it can be used to:

Display a message to the user
Play a video or audio file
Load additional scripts or stylesheets
Perform some other action

To use the onload event, you must first specify the function that you want to run when the event is triggered. This function will contain the code that you want to execute after the page has finished loading. Here's an example:


function myFunction() {
  // Code to be executed
}

window.onload = myFunction;

In this example, we define a function called myFunction(), which contains the code that we want to execute after the page has finished loading. We then assign this function to the window.onload event, which tells the browser to wait until everything on the page has been loaded before running the function.

Alternative Ways to Trigger the `onload` Event

While the window.onload method is the most commonly used way to trigger the onload event, there are other ways to do it as well. Here are a few:

<body onload="myFunction()">: This method specifies the function to be executed using an attribute on the body tag.
<img src="image.jpg" onload="myFunction()">: This method triggers the onload event when an image has finished loading.
<script src="script.js" defer></script>: This method uses the defer attribute to delay the execution of a script until after the page has finished loading.

Each of these methods can be useful in different situations, depending on what you're trying to achieve.

Conclusion

The onload event is an essential tool for web developers who want to ensure that their web pages load quickly and efficiently. By using this event, you can make sure that your code doesn't execute until all of the necessary resources have been loaded, ensuring a better user experience for your visitors.