Rate this Entry

Using Google to host your jQuery (or other) JavaScript libraries

Submit "Using Google to host your jQuery (or other) JavaScript libraries" to Google

Submit "Using Google to host your jQuery (or other) JavaScript libraries" to Digg

Posted 03-05-2009 at 09:28 PM by ddadmin

A growing number of scripts here on DD utilize the popular jQuery JavaScript library as its backbone, which means at the top of these scripts you'll see a reference such as:

Code:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

which obviously requires you to download and host "jquery-1.2.6.pack.js" locally on your server. For those of you who likes to minimize hosting your own files for whatever reason, Google does provide the service of remote hosting of all of the popular JavaScript libraries- including jQuery- in which all you have to do is point your script to access that library on Google's server instead.

There are two ways to access jQuery on Google's server.

1) A direct, static reference to the desired jQuery file/ version:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

As of writing version 1.3.2 is the latest version of jQuery, so I've chosen to access that particular file. Google hosts previous versions of the library as well unless otherwise noted, such as "1.2.6/jquery.min.js", if you wish to access that instead.

In general method 1) is the simplest way to take advantage of Google hosted libraries, and is the approach we will be slowly implementing for future jQuery related scripts here on DD. An example would be the updated Animated Collapsible DIV script.

2) A dynamic reference to the desired jQuery file using Google Ajax API:

This approach lets you reference a version of jQuery more generically, so instead of being locked into a specific version of jQuery (that will become outdated in time), you can, for example, reference the latest build of version 1.3.x (with x always reflecting the latest minor release at the time). Lets start with just referencing version 1.3.2 of jQuery, however:

Code:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery

google.setOnLoadCallback(function() {
  jQuery(function($) {
    // run your jQuery code in here after DOM has loaded
  });
});

</script>

When accessing jQuery dynamically using Google's Ajax API, you must use google.setOnLoadCallback() instead of the venerable jQuery(document).ready() function to execute any code once the document's DOM has become available. That's because jQuery is now being dynamically loaded, and only by using google.setOnLoadCallback() can you reliably know when jQuery has fully loaded (including access to jQuery(document).ready()).

Using the Google Ajax API syntax, if you wish to load the latest version of jQuery 1.3.x, you'd just do:

Code:

google.load("jquery", "1.3"); //load latest version 1.3.x of jQuery

Personally I'm not a fan of this second approach of accessing jQuery on Google. It requires loading Google's Ajax API first (which slows things down a bit), use of the "awkward" google.setOnLoadCallback(), plus the automatic versioning feature which if used may actually break a jQuery script that's not tested in the latest version.

Posted in JavaScript & Ajax

Views 13581 Comments 5

« Prev Main Next »

Total Comments 5

Comments

	It would be good if they had a permanent link to the latest version, like: Code: http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.min.js or just: Code: http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js Or would that be problematic with caches?
	Posted 03-05-2009 at 10:20 PM by Snookerman

	I think browser caching would be an issue in the above case, yes. That, plus Google Ajax API supposedly also enables additional features, such as load jQuery only on demand etc. I haven't really explored the docs on that.
	Posted 03-06-2009 at 06:14 AM by ddadmin

Guess what I found, latest version of jQuery:

Code:

http://code.jquery.com/jquery-latest.js
or just:
http://code.jquery.com/jquery.js
and minified:
http://code.jquery.com/jquery-latest.min.js

Also, you could load the latest 1.3.x and 1.x.x respectively:

Code:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
or:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

I have no idea how this works with the cache and whether it's better or worse to use these links, but it's useful if you don't want to change the links in all your pages or if you just want to download the latest version with just a few keystrokes.

Posted 03-07-2009 at 09:48 AM by Snookerman Snookerman is offline

In many cases though, this is just adding more work for the browser to do and/or linking to a host with less than optimal bandwidth available at the time the code is requested, slowing down your page. Ideally these external links to script libraries would speed things up because wide use would result in scripts being cached on the user end. However, with multiple versions, updates, the lack of consensus on which libraries to use, the actual scripts using the libraries going out of date due to updates to the libraries and a general lack of widespread enough use of the hosted libraries, it is probably still best to code in ordinary javascript, or if a library is used, include the most appropriate one for your script with its distribution.

Posted 03-11-2009 at 04:59 PM by jscheuer1 jscheuer1 is offline

	Isn't there a danger of not knowing exactly what you are doing when you use a library? Apart from that, I must admit that jQuery does have very nice 'things'. === Arie
	Posted 03-17-2009 at 08:23 PM by molendijk Updated 03-17-2009 at 08:23 PM by molendijk (correction)

Archive
< November 2009
Su	Mo	Tu	We	Th	Fr	Sa
25	26	27	28	29	30	31
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

vBulletin Message

Cancel Changes