JavaScript onload Event

The onload event fires when an element or page has finished loading. It is most commonly used on the body element or window object to execute code after all images, scripts, styles, and other resources have been successfully loaded.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload Event Demonstration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body onload="greetUser()">
    <div class="container">
        <div id="greeting" class="welcome-message">
            <h1>Welcome to JavaScript Tutorial!</h1>
        </div>
        <div id="status" class="status">Page is loading...</div>
    </div>

    <script>
    function greetUser() {
        // Update loading status
        document.getElementById("status").textContent = "Page loaded successfully!";
        
        // Additional message after 1 second
        setTimeout(() => {
            document.getElementById("status").textContent = 
                "The onload event has fired and performed all necessary initializations.";
        }, 1000);
    }
    </script>
</body>
</html>

RESULT