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
3 Answers
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");
}
2 Comments
cranberies
can you give me exemple how can i load Jquery and immediatly use it?
Mark Coleman
Found an example of loading jQuery for you.
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");
2 Comments
Gary
I agree with the direction your answer is heading, but I'd change a few things: createElement('script'); js.src = url; then append that to document.getElementsByTagName('head')[0].
brendan
good catch on the create element bit but unless you have another defining reason you should put js at the bottom of your page: developer.yahoo.com/performance/rules.html#js_bottom
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/