Improve UI performance using window.onload event

window.onload event is a very useful event when you are dealing with huge files like images, video etc. on the frontend.

window.onload = function(){
console.log("Application Loaded")
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function onloaded(){
var status = document.getElementById('status');
var loader = document.getElementById('loader')
status.innerText = "Application Loaded";
loader.style.display='none'
}
window.onload = onloaded;
</script>
<title>Window Onload | KMT</title>
</head>
<body>
<div style="text-align: center;">
<img src="https://images.pexels.com/photos/7974362/pexels-photo-7974362.jpeg" width="300px" height="400px"/>
<img src="https://images.pexels.com/photos/2377915/pexels-photo-2377915.jpeg" width="300px" height="400px"/>
<img src="https://images.pexels.com/photos/3626589/pexels-photo-3626589.jpeg" width="300px" height="400px"/>
<h1 class="display-6" id="status">Loading in progress...</h1>
</div>
</body>
</html>

I am a web developer - both front end developer / designer and backend programmer and passionate about new technologies.