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">
document.addEventListener(
  "DOMContentLoaded",
  function () {
    scriptTag(
      "https://domain.com/script.min.js");
  },
  false;//Dont capture
);

//The function:
function scriptTag(url) {
  const tag = document.createElement("script");
  tag.src = url;
  document.getElementsByTagName("head")[0].appendChild(tag);
}
</script>

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