How to Make Javascript Execute after Page Load?

How to make JavaScript execute after page load?

JavaScript is a powerful language that allows developers to add dynamic functionality to web pages. However, sometimes it is necessary to ensure that JavaScript code is executed only after the page has finished loading. This can be particularly important when working with elements that need to be present in the DOM before manipulating them.

In this article, we will explore different methods to make JavaScript execute after page load.

1. Using the window.onload event

The window.onload event is triggered when the entire page, including all its resources, has finished loading. This event can be used to execute JavaScript code after the page has loaded.

window.onload = function() {
  // Your JavaScript code here
};

By assigning a function to the window.onload event, the code inside the function will be executed once the page has finished loading.

2. Using the DOMContentLoaded event

The DOMContentLoaded event is triggered when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", function() {
  // Your JavaScript code here
});

By adding an event listener to the document object for the DOMContentLoaded event, the code inside the function will be executed as soon as the DOM is ready.

3. Using the defer attribute

The defer attribute can be added to the script tag to indicate that the script should be executed after the page has finished parsing. This allows the HTML parsing and rendering to continue without blocking the script execution.

By adding the defer attribute to the script tag, the JavaScript code will be executed after the page has finished loading, but before the DOMContentLoaded event is triggered.

4. Using the async attribute

The async attribute can also be added to the script tag to indicate that the script should be executed asynchronously. This means that the script will be executed as soon as it is available, without blocking the HTML parsing and rendering.

By adding the async attribute to the script tag, the JavaScript code will be executed as soon as it is available, without waiting for the page to finish loading or the DOM to be ready.

These are some of the methods you can use to make JavaScript execute after page load. Choose the method that best suits your needs and enjoy the benefits of executing JavaScript code at the right time.

Happy coding!