/ˈɒnˌloʊd/
noun … “an event that triggers when a web page or resource finishes loading.”
onload is an event handler in web development that executes a specified function when a document, image, or other resource has fully loaded in the browser. It is commonly used in HTML, JavaScript, and related web technologies to initialize scripts, perform setup tasks, or manipulate the DOM after all content and dependencies are available. By ensuring that code runs only after resources are ready, onload helps prevent errors and improves user experience.
The onload event can be attached to the <body>, <img>, <iframe>, or other elements. For example, assigning a function to window.onload ensures that scripts execute after the entire page, including stylesheets and images, has loaded. This event is essential for web applications that require precise timing for initialization, animations, or data fetching.
onload integrates naturally with other browser events such as onerror for error handling, onresize for responsive behavior, and asynchronous JavaScript operations like Fetch API calls. Combining these events allows developers to create dynamic, responsive, and robust web interfaces.
An example of using onload in JavaScript:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
console.log("Page has fully loaded");
document.getElementById("welcome").innerText = "Hello, World!";
};
</script>
</head>
<body>
<h1 id="welcome"></h1>
</body>
</html>
The intuition anchor is that onload acts like a “ready signal”: it waits for all resources to finish loading before executing code, ensuring that scripts interact safely with fully available elements and data.