I'm using google jsapi to load jquery. The example shows to do this: <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.setOnLoadCallback(function() { // Place init code here instead of $(document).ready() }); </script>
The problem I'm having is this... I'm also including google map api, google search api and jquery ui. all using .load. I then have several jquery plugins I'm using along with alot of code in the document.ready. My thinking was that I include two js files the first being http://www.google.com/jsapi and the 2nd having this: google.load("jquery", "1.3.2"); google.load("jqueryui", "1.7.2"); google.setOnLoadCallback(function() { }); so my code would like like this in the index file: <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript" src="http://myserver.com/js/combined- load-js-files-and-doc-read.js"></script> I'm wondering if this is hurting performance on the site by putting .load in another script file. My reasoning was that to include 30k+ of js plugins and code in index.php file would be bloat, so I figured I would put it in a separate file. Does anyone have any tips on how to do this properly, even if lets say I just include the google.load in the header and have the document.ready.... how do I pull in this massive js file? Secondly... and I think this steams from the performance problem.... but i'm using jquery ui tabs... and they take forever to render, mostly because I think all of this js is loading. TIA!
