javascript - Possible to defer loading of jQuery?

Question

Let's face it, jQuery/jQuery-ui is a heavy download.

Google recommends deferred loading of JavaScript to speed up initial rendering. My page uses jQuery to set up some tabs which are placed low on the page (mostly out of initial view) and I'd like to defer jQuery until AFTER the page has rendered.

Google's deferral code adds a tag to the DOM after the page loads by hooking into the body onLoad event:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

I'd like to defer loading of jQuery this way, but when I tried it my jQuery code failed to find jQuery (not completely unexpected on my part):

$(document).ready(function() {
    $("#tabs").tabs();
});

So, it seems I need to find a way to defer execution of my jQuery code until jQuery is loaded. How do I detect that the added tag has finished loading and parsing?

As a corollary, it appears that asynchronous loading may also contain an answer.

Any thoughts?

Answer 1

Try this, which is something I edited a while ago from the jQuerify bookmarklet. I use it frequently to load jQuery and execute stuff after it's loaded. You can of course replace the url there with your own url to your customized jquery.

(function() {
    ? function getScript(url,success){
    ? ? var script=document.createElement('script');
    ? ? script.src=url;
    ? ? var head=document.getElementsByTagName('head')[0],
    ? ? ? ? done=false;
    ? ? script.onload=script.onreadystatechange = function(){
    ? ? ? if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
    ? ? ? ? done=true;
    ? ? ? ? success();
    ? ? ? ? script.onload = script.onreadystatechange = null;
    ? ? ? ? head.removeChild(script);
    ? ? ? }
    ? ? };
    ? ? head.appendChild(script);
    ? }
        getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
            // YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
        });
    })();

I would really combine jQuery and jQuery-UI into one file and use a url to it. If you REALLY wanted to load them separately, just chain the getScripts:

getScript('http://myurltojquery.js',function(){
        getScript('http://myurltojqueryUI.js',function(){
              //your tab code here
        })
});