How To Run Javascript After Page Load (Simple Examples)

Once upon a time, a confident student reassured Master Coffee that running Javascript on page load is very easy – Just add window.onload = FUNCTION. But the next day, the student asked Master Coffee why “my page is not working properly”. There’s more than meets the eye for the “simple on-page load”, read on.

 

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

1) WAYS TO RUN JAVASCRIPT ON PAGE LOAD

1A) ON WINDOW LOAD

1a-load.html
// (PART A) ON WINDOW LOAD
window.onload = () => {
  console.log("Loaded");
};

This is exactly the introduction snippet, just set window.onload = FUNCTION.

P.S. () => { ... } is called an “arrow function”, a shorthand for function () { ... }

 

 

1B) EVENT LISTENERS

1a-load.html
// (PART B) ADD EVENT LISTENER
window.addEventListener("DOMContentLoaded", () => {
  console.log("On content load");
});
window.addEventListener("load", () => {
  console.log("On page load");
});

Next, is to set window.addEventListener(EVENT, FUNCTION).

  • load This is triggered when the page is fully loaded. That is, inclusive of all images, videos, audio, etc…
  • DOMContentLoaded This is triggered right before load. That is, some images, videos, and audio may not be fully loaded.

P.S. There is a difference between window.addEventListener() and window.onload. We will go through that later.

 

 

1C) DEFER LOADING

1a-load.html
<!-- (PART C) DEFER LOADING -->
<script defer src="1b-load.js"></script>

Set defer on the <script>. The browser will wait until the “main body and content” is done, then proceed to load this script.

 

1D) PLACE THE SCRIPT AT THE BOTTOM

1a-load.html
<body>
  - PAGE CONTENT -

  <!-- (PART D) PLACE AT BOTTOM -->
  <script src="1c-load.js"></script>
</body>

Lastly, an old-school method. Just place the script at the bottom of the page, right before the closing </body>.

 

 

2) THINGS TO LOOK OUT FOR

2A) PROCESS ORDER

Event listener, defer, on load, which one will launch first? With the above example:

  • 1c-load.js The script at the bottom of the page runs first.
  • 1b-load.js Followed by the deferred script.
  • DOMContentLoaded When the page and scripts are loaded.
  • window.onload and window.addEventListener("load") When the page is fully loaded.

P.S. window.onload fires first, because we defined it before window.addEventListener("load").

P.P.S. If we swap the order, window.addEventListener("load") will run before window.onload.

 

 

2B) WINDOW ON LOAD WILL BE OVERRIDDEN

2-beware.html
// (PART A) ONLOAD
// (A1) THIS WILL NOT RUN!
window.onload = () => {
  console.log("Loaded");
};
 
// (A2) THIS WILL RUN INSTEAD
window.onload = () => {
  console.log("Override");
};

As for why the student’s script “is not working” – There can only be one window.onload. If you define multiple window.onload, only the latest one will run.

P.S. Try to use window.addEventListener("load") instead, there is technically no limit to how many scripts we can “prime” this way.

 

 

2C) DEFERRED SCRIPT LOADING ORDER

2-beware.html
<!-- (PART C) DEFER LOADING -->
<script defer src="1b-load.js"></script>
<script defer src="1c-load.js"></script>

If you define multiple deferred scripts, they will load in the exact order you defined them in – From top to bottom.

  • All “normal” <script> will load and run first.
  • Followed by 1b-load.js and 1c-load.js.

 

 

THE END – INSERT SCRIPT ALTERNATIVE

That’s all for this short tutorial. I hope this has helped you to solve the mystery of “properly run Javascript on page load”. Before we end, here’s one last alternative – Insert a script into the page after loading.

window.addEventListener("load", () => {
  let script = document.createElement("script");
  script.src = "YOUR-SCRIPT.JS";
  script.async = true;
  document.head.append(script);
});

This is a roundabout method though, use this only when you have “no other choice” or working on a single-page app.

 

CHEAT SHEET

Load Javascript After Page Load (click to enlarge)