Load Javascript for only a few

[ocon]

Currently I have to load a script for all users even though its used by few. I am trying to load this script dynamically inside another script but am not having any success.

Contents of http://www.example.com/example.js:

function func1() { return 'bird';}
function func2() { return '200';}


Works but loads example.js for all users:

<script type="text/javascript" src="http://www.example.com/example.js"></script>
<script type="text/javascript">
...
function called_only_a_few_times(){
var func1Val = func1();}
...
</script>


Does not work, but isn't loading example.js for everyone:

<script type="text/javascript">
...
function called_only_a_few_times(){
var eg=document.createElement("script");
eg.type="text/javascript";
eg.src="http://www.example.com/example.js";
document.getElementsByTagName("head").item(0).appendChild(eg);
var func1Val = func1();}
...
</script>

[skoff]

[Fotiman]

Does not work, but isn't loading example.js for everyone:

<script type="text/javascript">
...
function called_only_a_few_times(){
var eg=document.createElement("script");
eg.type="text/javascript";
eg.src="http://www.example.com/example.js";
document.getElementsByTagName("head").item(0).appendChild(eg);
var func1Val = func1();}
...
</script>

That will load example.js asynchronously, which means it may or may not (probably not) be finished loading when you try and call func1() in the line following it. What you need is a callback when it has finished loading.

If you use jQuery, you could do something like this:

function called_only_a_few_times(){ 
  var func1Val;
  $.ajax({
    url: 'http://www.example.com/example.js',
    dataType: 'script',
    cache: true,
    success: function() {
      func1Val = func1();
    }
  }
}

.

Alternatively

function called_only_a_few_times(){ 
  var func1Val;
  var eg = document.createElement("script");
  eg.src = 'http://www.example.com/example.js';
  // the type attribute is not needed/does not do anything
  eg.onload = eg.onreadystatechange = function() {
    var rs = this.readyState;
    if (rs && rs != 'complete' && rs != 'loaded') return;
    func1Val = func1();
  };
  // Instead of inserting in the head, insert before the first script tag
  // since head could be omitted, but since we are in a script, we know
  // there is at least 1 script element defined somewhere
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(eg, s);
}

[ocon]

Thank you very much. I'm not using jQuery, but the alternative script worked very well for me.

[Fotiman]

Glad to help. :)