Inject external javascript file in html body after page load

Question

I want to load an external javascript after page is loaded. Actually the javascript contains source for an ad and its making page load slow. All I want is to delay loading & execution of ads to make sure fast page load.

thanks, Bilal

Answer 1

You may just use this script at the last tag of your body block:

<script type="text/javascript">
   var script = document.createElement('script');
   script.setAttribute('src', 'http://yourdomian.com/your_script.js');
   script.setAttribute('type', 'text/javascript');
   document.getElementsByTagName('head')[0].appendChild(script);
</script>

Answer 2

I would look at using asynchronous Javascript loading. There are frameworks for this such as requireJS.

Answer 3

var script=document.createElement('script');
script.type='text/javascript';
script.src=url;

$("body").append(script);

Courtsey

Answer 4

$("#selector").click(function(){ $.getScript("YourScript.js"); });

Then Run what is implemented in that script

Answer 5

Without using something like jQuery getScript() and a promise or a proper loading library like requireJS, the script can be included in the page, but will load async so there's no guarantee it will be ready when you need it. If you're already using jQuery, the simple answer is then:

$.getScript( scriptUrl ).then( function() {
  //do this ONLY after the script is fully loaded
});