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

Have you tried putting the ` – Tomalak May 24 '12 at 09:46 — Tomalak, May 24 '12 at 09:46

score 22 · Accepted Answer · answered May 24 '12 at 09:55

22

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>

answered May 24 '12 at 09:55

Aleš Kotnik

2,654
20
17

this will not show ads that are loaded by the external script. – Tepu May 24 '12 at 10:44
Improve of the last line: `document.head.appendChild(script)` – Timo Jan 08 '22 at 11:45

score 6 · Answer 2 · edited May 23 '17 at 12:34

6

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

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

Courtsey

edited May 23 '17 at 12:34

Community

1
1

answered May 24 '12 at 09:48

Ankur Verma

5,793
12
57
93

5

There is no need to use jQuery at this point. `document.body.appendChild(script);` – Tomalak May 24 '12 at 09:54
this will not show ads that are loaded by the external script. – Tepu May 24 '12 at 10:44
1

The script does not become immediately available (using the jQuery and non-jQuery approaches) so this isn't a universal solution. You would either need to use a library like async or use the jQuery getScript method with a promise (see below). – rainabba May 23 '15 at 18:42

score 2 · Answer 3 · edited May 30 '12 at 18:00

2

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

edited May 30 '12 at 18:00

Jon Adams

24,464
18
82
120

answered May 24 '12 at 09:46

Richard

21,728
13
62
101

score 2 · Answer 4 · answered May 24 '12 at 10:52

2

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

Then Run what is implemented in that script

answered May 24 '12 at 10:52

DadViegas

2,263
16
12

Same as above, this loads async so to be stable, you must use an sync library or promises for example: $.getScript( url ).then( function() { //won't be called until the script is actually loaded }); – rainabba May 23 '15 at 18:39

score 0 · Answer 5 · answered May 23 '15 at 18:46

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
});

Inject external javascript file in html body after page load

5 Answers5

Linked