Script Loading Order
DOMContentLoaded fires when HTML is fully parsed. window.onload fires after all resources (images, CSS) are loaded. Knowing the difference prevents "element not found" errors.
HTML
Intermediate
5 min read
JavaScript Loading Order
Example
document.addEventListener("DOMContentLoaded", () => {
// DOM is ready — safe to query elements
const btn = document.querySelector("#btn");
btn.addEventListener("click", handler);
});
window.addEventListener("load", () => {
// All resources loaded including images
console.log("Page fully loaded");
}); Pro Tip
Use DOMContentLoaded for most DOM work — window.load waits for images and is usually too late.