Delay loading of script in dom by N seconds

Question

After my site loaded, I want to delay the below javascript for 10 seconds

script:

<script type="text/javascript" id="io258wer15cfg789as69th07er64hziq" src="//mysite.domain.com/script.php?id=io258wer15cfg789as69th07er64hziq" defer></script>

i tried this but not working:

<script 
    setTimeout(
      function(){ 
        type="text/javascript" 
        id="io258wer15cfg789as69th07er64hziq" 
        src="//mysite.domain.com/script.php?id=io258wer15cfg789as69th07er64hziq" 
        defer } 
    ,10000)>
</script>

Answer 1

You need to add it using createElement. So that it will inject after 10s.

document.addEventListener("DOMContentLoaded", function(event) {
  setTimeout(addScript, 1000)
});

function addScript() {

  script = document.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.onload = function() {
    console.log("Added Script");
  };
  script.src = 'https://foo.com/bar.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}