javascript onload complete

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});

1document.addEventListener('DOMContentLoaded', function() {
2   // your code here
3}, false);
4