How to Execute JavaScript After Page Load

To execute JavaScript code after a page has loaded, you have several options, depending on whether you want the script to run after the DOM is fully constructed or after all resources (like images and stylesheets) are fully loaded. Here are some common methods:

1. Using `DOMContentLoaded`#

The DOMContentLoaded event is triggered when the HTML has been completely loaded and parsed, but before all images and other resources have finished loading. This is often sufficient for many use cases where you only need the DOM to be ready.

document.addEventListener("DOMContentLoaded", function () {
    // Your code here
    console.log("DOM is fully loaded and parsed.");
});

2. Using `window.onload`#

The window.onload event is triggered when the entire page, including all dependent resources like images, stylesheets, and subframes, has finished loading. This is useful if your code depends on all resources being fully loaded.

window.onload = function () {
    // Your code here
    console.log(
        "All resources including images, scripts, and stylesheets have loaded."
    );
};

3. Placing Scripts at the Bottom of the HTML#

By placing your <script> tags at the end of the <body> tag, you ensure that your JavaScript code runs after the DOM has been fully constructed. This is a traditional approach to ensure that the script executes only after the entire page has loaded.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <!-- Page content here -->

        <script>
            // Your code here
            console.log("Script executed after the HTML content.");
        </script>
    </body>
</html>

4. Using the `defer` or `async` Attributes with External Scripts#

If you’re including external JavaScript files, you can use the defer or async attributes to control when the script executes:

defer: The script will be executed after the HTML document has been completely parsed but before the DOMContentLoaded event. It ensures that the script will execute in the order it appears in the HTML.
```
<script src="script.js" defer></script>
```
async: The script will be executed as soon as it is available, potentially before the HTML document is fully parsed. This may lead to the script running out of order if multiple scripts are marked as async.
```
<script src="script.js" async></script>
```

5. Using `setTimeout` for Delayed Execution#

If you need to delay the execution of your code for a specific amount of time after the page has loaded, you can use setTimeout. This method can be useful if you need to ensure that certain conditions or animations have settled.

window.onload = function () {
    setTimeout(function () {
        // Your code here
        console.log("Code executed after a delay.");
    }, 1000); // Delay in milliseconds
};

Summary#

Use DOMContentLoaded for when you only need the DOM to be ready.
Use window.onload when you need to ensure all resources are loaded.
Place scripts at the end of the HTML body for simplicity.
Use defer or async attributes with external scripts for better control over script execution.
Use setTimeout for delayed execution after the page load.

Each method has its use cases, so choose the one that best fits your needs based on when you need the JavaScript code to run in relation to the page load process.

How to Execute JavaScript After Page Load

1. Using DOMContentLoaded#

2. Using window.onload#