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