What is window load event?
This event is important because it allows you to run code that will utilize the finalized HTML for things like animations or working with third-party APIs. JavaScript provides a rich programming interface that can be used in browsers to create interactive web pages. One of the key features of JavaScript is its event-handling capabilities. Window load events are a great way to optimize your web development process. By using them, you can ensure that all of the necessary resources are loaded before your code is executed. This can help avoid potential issues with race conditions and other asynchronous problems.
javascript page load event
//two ways of executing JS code after page is loaded, use "DOMContentLoaded" when able
document.addEventListener("DOMContentLoaded", function(){
//dom is fully loaded, but maybe waiting on images & css files
});
window.addEventListener("load", function(){
//everything is fully loaded, don't use me if you can use DOMContentLoaded
});
javascript document load
window.addEventListener("load", function(event) {
console.log("Tutte le risorse hanno terminato il caricamento!");
});
window load javascript
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
window load
// loader with jaquery
$(window).on('load', function () {
$('#loading').fadeOut(1000);
});
// loader with javascript with inline
//html code
<div id="loading" onload="preload()"></div>
//javascript code
var loader= document.getElementById("loading");
loader.style.display="none"
//loader with javascript with custom time
var loader = document.getElementById("loading");
window.addEventListener("load", function () {
setTimeout(function () {
loader.style.display = "none"
},5000)
})
Additionally, window load events can help improve the performance of your code by reducing the amount of time spent loading resources.