1//two ways of executing JS code after page is loaded, use "DOMContentLoaded" when able
2
3document.addEventListener("DOMContentLoaded", function(){
4    //dom is fully loaded, but maybe waiting on images & css files
5});
6
7window.addEventListener("load", function(){
8    //everything is fully loaded, don't use me if you can use DOMContentLoaded
9});

1//for jquery
2//after document load
3$(document).ready(function() {   //same as: $(function() { 
4     alert("hi 1");
5});
6//after full window load including image src css file
7$(window).load(function() {
8     alert("hi 2");
9});

1document.addEventListener('readystatechange', event => { 
2
3    // When HTML/DOM elements are ready:
4    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
5        alert("hi 1");
6    }
7
8    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
9    if (event.target.readyState === "complete") {
10        alert("hi 2");
11    }
12});