JavaScript window Load Event: window.onload and DOMContentLoaded

JavaScript window load event illustration

The load event fires on window after the document and its dependent resources such as stylesheets, scripts, images and iframes have finished loading. Use it when your code genuinely depends on the complete page load.

window.addEventListener('load', () => {
  console.log('The page and dependent resources are loaded.');
});

If you only need the parsed HTML DOM, DOMContentLoaded is usually earlier and more appropriate. Scripts placed at the end of <body>, or modern defer/type="module" scripts, often do not need either event for ordinary DOM access.

The original plus2net use case of setting focus on an input after page load is still valid, although focus should only be moved automatically when it helps rather than surprises the user.

Demo of window load event

Table of Contents

Video tutorial
Basic window load example
Assigning a handler correctly
Body onload
load vs DOMContentLoaded
Selecting an input after load
Multiple load handlers
Questions

Video Tutorial Top ↑

Basic Window Load Example Top ↑

The modern pattern is to register a callback with addEventListener(). This also lets multiple scripts listen for the same event without replacing one another.

function myCode() {
  alert('Alert inside myCode function');
}

window.addEventListener('load', myCode);

Assigning a Handler Correctly Top ↑

If you use the window.onload property, assign the function itself. Do not add parentheses unless you intentionally want to call the function immediately while the script is being evaluated.

// Correct: run myCode when load fires
window.onload = myCode;

// Different behavior: calls myCode immediately and assigns its return value
window.onload = myCode();

Using onload on the Body Element Top ↑

The HTML onload attribute on <body> represents the same window-level load event. It is supported, but keeping JavaScript out of HTML attributes makes larger pages easier to maintain.

<body onload="myCode()">
  ...
</body>

For new code, prefer:

window.addEventListener('load', myCode);

load vs DOMContentLoaded Top ↑

DOMContentLoaded fires after the HTML document has been parsed and deferred/module scripts have run; it does not wait for every image and other dependent resource. The window load event waits for the full page load, excluding lazily loaded resources.

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM is ready');
});

window.addEventListener('load', () => {
  console.log('Page resources are loaded');
});

Example: Select a Textbox After Page Load Top ↑

The original tutorial demonstrated selecting a textbox. Contrary to the older explanation, elements in the body can be accessed from a window load handler because the DOM has already been parsed by that time.

window.addEventListener('load', () => {
  const textBox = document.getElementById('t2');
  textBox.focus();
  textBox.select();
});

<form name="form1" method="post" action="">
  <input type="text" name="t1" value="plus2net" id="t2">
</form>

Handling Multiple Load Functions Top ↑

Assigning a second function to window.onload replaces the first property handler. With addEventListener(), each listener can remain registered.

window.addEventListener('load', () => {
  console.log('First load listener');
});

window.addEventListener('load', () => {
  console.log('Second load listener');
});

Questions Top ↑

What is the purpose of the window load event?
How do you assign a function to window.onload?
Why is window.onload = myCode different from window.onload = myCode()?
How can multiple functions listen for the page load?
What is the difference between load and DOMContentLoaded?
When is it unnecessary to wait for load before accessing the DOM?
What are common use cases for the window load event?
How does a body onload attribute relate to the window load event?

Window object Reference Window prompt for input data Alert box

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

diya	01-02-2016
I did not understand the difference, when onload is in body and head, if it is head noticed that i should be giving "window.onload=my_code();" but for the body i should be giving window.onload=my_code;

Amar	27-11-2014
Both codes above in comparison are same.

Azim	24-06-2015
Thank You so much

JavaScript window Load Event (window.onload)