Question

168

Possible to defer loading of jQuery?

rated 0 times [ 169] [ 1] / answers: 1 / hits: 70820 / 13 Years ago, mon, may 2, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harrisonnelsonb

Add To Favorites

Follow

Total Points: 63

Total Questions: 112

Total Answers: 97

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

answered 13 Years ago leslijessalyng · Accepted Answer

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

        })

});