JavaScript Load Events
Load Events happen when the browser finishes loading a page or an element.
The two most important load events:
- load (waits for images, CSS, etc.)
- DOMContentLoaded (runs when HTML is ready)
Window Load
Example
<p id="demo"></p>
<script>
// Add Event Listener to window
window.addEventListener("load", function () {
document.getElementById("demo").innerHTML = "Page is fully loaded!";
});
</script>
Try it Yourself »
DOMContentLoaded
Example
<p id="demo"></p>
<script>
// Add Event Listener to document
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("demo").innerHTML = "HTML is loaded!";
});
</script>
Try it Yourself »
Image Load
Example
<img id="myImg"
src="https://www.w3schools.com/images/w3schools_green.jpg" width="120">
<p id="demo"></p>
<script>
const img = document.getElementById("myImg");
// Add Event Listener to img
img.addEventListener("load", function () {
document.getElementById("demo").innerHTML = "Image loaded!";
});
</script>
Try it Yourself »
