dynamically load javascript?

Question

I use a large number of scripts in the application, some of them are not required to download the application, I want to download them immediately before using them, if possible, knowing that my application is encoded in ExtJS and uses many ajax calls

Answer 1

You can look at LABjs , which is the 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 download jQuery, you can do something similar 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 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 is a great post on the topic with the proposed solution, which you can check: http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/