0

i managed to defer loading of JS libraries and also one document ready function, following this post Possible to defer loading of jQuery?

However, I have multiple document ready functions that are placed in the page by different modules (and not on every page). the code I have so far: 

echo'
//      deferred loading of jQuery library and
(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("lib/jquery/js/jquery-1.4.4.min.js",function(){
   getScript("lib/jquery/js/jquery.tools.min.js",function(){
     $("ul.tabs").tabs("div.panes > .pane",  {
 ';
 if(!isset($params['onclickfunction']) == 'no') {
 echo '
              onClick: function() {

                   var myTab = this.getCurrentTab().text();
                   document.getElementById("titleReplacement").innerHTML = " - " + myTab;
              },
  '; } //end conditional click function

echo '
              effect:"fade",
              fadeInSpeed:800,
              initialIndex:';

if(isset($_GET['tabs'])) { $this_url = $_GET['tabs']; }
else { $this_url = 'some text'; }

if($this_url == $params['tab1']) { echo '0'; }
elseif ($this_url == $params['tab2']) { echo '1'; }
elseif ($this_url == $params['tab3']) { echo '2'; }
//nothing matches? show first tab
else { echo '0'; }

echo  ' })  ;

   });
  })   // possibly another ; here ???
 })();
';

I think this actually works but other document ready functions are trying to run before libraries are loaded. Is there a simple test I could use for the other functions as I am unable to merge them into one function.

cheers

Community
  • 1
  • 1
rotezecke
  • 85
  • 1
  • 11

2 Answers2

0

You could do a basic check to see if jQuery is a defined function like so:

if( jQuery !== undefined ){
    //Execute your jQuery code here
}

However, the above would run once and if jQuery is not defined then it wouldn't run again. Wrap your document.ready code in a function that you execute on successful load of the jQuery lib, just like what you are doing when you create your tabs.

You may also want to try loading the jQuery lib from a CDN. You will get the benefits of a fast server and caching which may allow you to load the lib in the header without a major performance hit.

Simon
  • 1,756
  • 12
  • 8
  • You many be overstating the CDN benefits as there's the potential cost of the DNS lookup for the CDN, along with slow-start etc. Also some recent research has hightlighted the low odd of actually having the version of jQuery your need in cache. Ultimately try it an measure is the only answer. – Andy Davies Nov 26 '11 at 21:58
  • 1
    Agree, hence why I said "may". Any changes should be made with a valid reason and not on a whim. A good reason is measurement. I probably should've explained a bit more though :). – Simon Nov 27 '11 at 05:02
  • God, my previous comment looks like it was written by someone semi-literate! I saw the 'may' but wanted to expand on it for others as many people don't consider the implications of switching to Google's CDN and don't understand all the TCP issues. If you're interested this was the article on using jQuery from the Google CDN - http://statichtml.com/2011/google-ajax-libraries-caching.html – Andy Davies Nov 27 '11 at 20:01
0

Have a look at Kyle Simpson's LABjs. I think this will do what you want...

Andy Davies
  • 5,794
  • 2
  • 26
  • 21