dynamically load javascript?

Question

I use a lot of script in an application, some of them are not required to load the application, I want to load them just before their use if possible, knowing that my application is coded in ExtJS, and uses many ajax calls

Answer 1

You could look at using LABjs which is a script loader.

Old and busted:

<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>

New hotness:

<script>
   $LAB
   .script("framework.js").wait()
   .script("plugin.framework.js")
   .script("myplugin.framework.js").wait()
   .script("init.js").wait();
</script>

Update: If you want to load jQuery you could do something like this from this blog post.

<script type="text/javascript" src="LAB.js">
if (typeof window.jQuery === "undefined") {
    $LAB.script("/local/jquery-1.4.min.js");
}

Answer 2

You can load an external file using javascript only when/where you need it:

function LoadJs(url){
  var js = document.createElement('script');

  js.type = "text/javascript";
  js.src = url;

  document.body.appendChild(js);

}

LoadJs("/path/to/your/file.js");

Answer 3

Here's a great post on the topic with a proposed solution you might want to check out: http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/