Load JavaScript on demand

Insert this in your javascript:

var LoadedScripts = new Array(); jQuery.getScript = function(url, callback, cache){ if ($.inArray(url, LoadedScripts) > -1) { callback(); } else { LoadedScripts.push(url); jQuery.ajax({ type: "GET", url: url, success: callback, dataType: "script", cache: cache }); } }; 

How to use it:

function YourFunction() { jQuery.getScript('path/to/your/script.js',function(){ // your code here - the script has loaded },true); } 

change "true" to turn cache off and force reload of file (useful for css)

function YourFunction() { jQuery.getScript('path/to/your/script.js',function(){ // your code here - the script has loaded },false); } 

YUI Compressor can be used to shrink JS and CSS files, if you're downloading someone elses library/code, they usually provide a minified version so you'll see no savings over trying to min it again. If you want to 'trim it down' to exclude parts of the library you aren't using, you may want to reconsider using a library in the first place and not just creating your own solutions for the pieces you need... but you may be surprised how useful the parts you're trying to exclude are.

you can use getScript() to load additional scripts on demand are you using the minified jquery and jquery moblie files ?

<pre><code> function require (src, callback) { if (!(src != null && (typeof src == 'string' || typeof src == 'object'))) return; var src = typeof src == 'string' ? [src] : src; var total = []; var loaded = []; var failed = []; var fn = function (e) { if (e.type == 'load') loaded.push(e.target.src); else failed.push(e.target.src); if ((loaded.length + failed.length) == total.length && typeof callback == 'function') callback(!!failed.length, loaded, failed); }; var load = function (src) { var s = document.createElement('script'); s.type = 'application/javascript'; s.src = src; s.addEventListener('error', fn, false); s.addEventListener('load', fn, false); document.getElementsByTagName('head')[0].appendChild(s); return s.src; }; for (var i in src) { var s = src[i].split(/[\s,]+/); for (var j in s) if (total.indexOf(s[j]) < 0) total.push(load(s[j])); } } // Usage example: require ('script1.js, script2.js, ...', function (hasError, loaded, failed) { console.log(arguments); }); </code></pre>