Assuming that both of these approaches load the script properly, and that I wait the appropriate amount of time before using the script (and/or use a callback), what are the major differences between these approaches.
Note: I understand the first uses jQuery (which is a larger download etc.). What I'm really interested in is the after affects of these approaches. Does one place the script in a different scope than the other? Etc.
jQuery:
function loadScript() {
$.getScript('/myscript.js');
}
Appending to body:
function loadScript() {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= '/myscript.js';
script.async = true;
document.body.appendChild(script);
}
Appending to head:
function loadScript() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= '/myscript.js';
script.async = true;
head.appendChild(script);
}
Assuming that both of these approaches load the script properly, and that I wait the appropriate amount of time before using the script (and/or use a callback), what are the major differences between these approaches.
Note: I understand the first uses jQuery (which is a larger download etc.). What I'm really interested in is the after affects of these approaches. Does one place the script in a different scope than the other? Etc.
jQuery:
function loadScript() {
$.getScript('http://www.mydomain/myscript.js');
}
Appending to body:
function loadScript() {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.mydomain/myscript.js';
script.async = true;
document.body.appendChild(script);
}
Appending to head:
function loadScript() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.mydomain/myscript.js';
script.async = true;
head.appendChild(script);
}
-
1
is there a way on pure javascript to detect when the script is loaded? I mean
jQuery.getScript()function has a callback... is there something similar in javascript? – Paolo Falomo Commented Aug 30, 2016 at 9:35 -
Oh i just thinked a bit on it... maybe
<script onload="myScriptCallback()" src="/pathtoscript.js"></script>? What do u think guys? – Paolo Falomo Commented Aug 30, 2016 at 9:40 - would love to know this as well... – Ruben Martinez Jr. Commented Jul 13, 2017 at 6:08
3 Answers
Reset to default 5jQuery appends the script element to head if present, or to document element otherwise. Under the hood the code is similar. The final result will be the same: both approaches execute new code in the global scope.
the documentation to Jquery method says:
Load a JavaScript file from the server using a GET HTTP request, then execute it.
That means the imported javascript will be straigt invoked after successful loading.
Appending to the head: It means the browser adds the script-tag as a last child and executes the content (it is the same if you add the tag manuelly at the end of the head tag). Appending to the body: It means the browser adds the script-tag as a last child of the body tag and executes that content (it is the same if you add the tag manuelly at the end of the body tag).
It is worth mentioning that jQuery's getScript function disables caching by default, meaning that browsers will download the script every time the page is requested (see previous answer here). Your loadScript function, on the other hand, should take advantage of caching.