JavaScript - event fired when all web page is loaded
Quick solution:
// Events that wait for all resources
// 1.
window.addEventListener('load', function() { /* ... */ });
// 2.
// <body onload="executeSomeLogic()"></body>
// 3.
document.body.onload = function() { /* ... */ };
// Events that do not wait for all resources
// 1.
window.addEventListener('DOMContentLoaded', function() { /* ... */ });
// 2.
document.addEventListener('DOMContentLoaded', function() { /* ... */ });
Note: read this article to know about load event order.
Below the events usage are presented in details.
1. Body load event examples
This event is called when body element is ready, scripts executed and all synchronous resources are loaded (frames, objects, images, etc.).
1.1. onload attribute event
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body onload="onBodyLoad()">
<p>Some text ...</p>
<script>
function onBodyLoad() {
console.log('Body onload event called.');
}
</script>
</body>
</html>
1.2. onload property event
This event is called when body element is ready, scripts executed and all synchronous resources are loaded (frames, objects, images, etc.).
document.body property used in below example is not avaialbe until body element is created - access it from inside body element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<p>Some text ...</p>
<script>
document.body.onload = function() {
console.log('Body onload event called.');
}
</script>
</body>
</html>
2. Window load event example
This event is called when whole web page is ready, scripts executed and all synchronous resources are loaded (frames, objects, images, etc.).
2.1. onload property event
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
window.onload = function() {
console.log('Window onload event called.');
};
</script>
</head>
<body>
<p>Some text ...</p>
</body>
</html>
2.2. Event listener and load event
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function() {
console.log('Window onload event called.');
});
</script>
</head>
<body>
<p>Some text ...</p>
</body>
</html>
3. DOMContentLoaded event example
This event occurs when the DOM is ready without waiting to load for the stylesheets, images and subframes.
Note: this approach is not supported in Iinternet Explorer and Opera < 9.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<p>Some text ...</p>
<script>
window.addEventListener('DOMContentLoaded', function() {
console.log('Window DOMContentLoaded event called.');
});
document.addEventListener('DOMContentLoaded', function() {
console.log('Document DOMContentLoaded event called.');
});
</script>
</body>
</html>
Â