//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
});//for jquery
//after document load
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
//after full window load including image src css file
$(window).load(function() {
alert("hi 2");
});document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});