Loading Javascript files after page has finished loading

How to load a javascript file only once the page has finished loading.

This is done with a document event listener that will run when the content has been fully loaded and parsed (DOMContentLoaded).

The scriptTag() function applies a javascript file URL into a script tag and places into the HTML header just like it is done when hardcoding script files e.g

<script src="https://domain.com/filename.min.js"></script>

Put this before your closing </body> tag

<script type="application/javascript">
  function () {
  false;//Dont capture

//The function:
function scriptTag(url) {
  const tag = document.createElement("script");
  tag.src = url;

Just be wary doing this with Jquery as you will get Uncaught ReferenceError: $ is not defined errors.