View RSS Feed

ddadmin

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

Rating: 115 votes, 4.70 average.
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.

Submit "Using Google to host your jQuery (or other) JavaScript libraries" to del.icio.us Submit "Using Google to host your jQuery (or other) JavaScript libraries" to StumbleUpon 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

Tags: None Add / Edit Tags
Categories
JavaScript & Ajax

Comments

  1. Snookerman's Avatar
    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?
  2. ddadmin's Avatar
    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.
  3. Snookerman's Avatar
    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.
  4. jscheuer1's Avatar
    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.
  5. molendijk's Avatar
    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
    Updated 03-17-2009 at 07:23 PM by molendijk (correction)
  6. vol7ron's Avatar
    @ddadmin:
    I'm getting an error in IE8 - I tried to do some debugging, but haven't had much time, to debug I'm using: /1.3.2/jquery.js (non-minified)

    Code:
    		// IE uses filters for opacity
    		if ( !jQuery.support.opacity && name == "opacity" ) {
    			if ( set ) {
    				// IE has trouble with opacity if it does not have layout
    				// Force it by setting the zoom level
    				elem.zoom = 1;
    
    				// Set the alpha filter to set the opacity
    				elem.filter = (elem.filter || "").replace( /alpha\([^)]*\)/, "" ) +
    					(parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
    			}
    
    			return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
    				(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
    				"";
    		}
    
    		name = name.replace(/-([a-z])/ig, function(all, letter){
    			return letter.toUpperCase();
    		});
    
    		if ( set )
    			elem[ name ] = value;
    
    		return elem[ name ];
    	},
    IE8 says error is at Line:1061 Char:4
    In MS Visual Studio 2K5, line 1061, is the elem[name]=value - right before the last return statement.

    I included the chunk of code in scope, which shows that this has to do with the IE filtering/opacity portion of jquery. Any luck on getting this to work in IE8?


    @molendijk:
    There is always a danger. Generally, if using an untrusted library, the danger is that an external site could be retrieving/storing private user information. Other dangers could be more malicious, but generally not performed with JavaScript.

    In this particular case, jQuery implements some dom ready events, which may be placed higher in the stack. This generally doesn't mean much, but if you have your own code that that you want to run, when the dom is ready, then this could pose a delay and a perceived performance hit, depending on what is being done. I've noticed this due to the pre-loading of the images in the script. The result is to place your other code before this slideshow load script, so that it is placed in the stack first.
  7. vol7ron's Avatar
    btw, i also tried version 1.4.2, some stuff was changed, but the error is still happening at the same spot.

    I'm not sure if this is a jQuery problem, or a fadeslideshow.js problem
  8. vol7ron's Avatar
    I just realized I had two different Dynamic Drive pages open, these comments were referencing a dynamic slideshow fade: http://www.dynamicdrive.com/dynamici...nslideshow.htm

    and just a follow-up, the reason why it's not working is because from the article, the in-page script has you set the width of the gallery container. I set the width to '100%', which works in FF and Chrome, but not IE. I'm not sure why this is breaking in jQuery for IE, other than the fact that setting an element's css width style to '100%' is not working, perhaps jQuery sets it with a unit, so that it's '100%px', which would fail.

    Anyhow, to get the effect that I wanted, I manually set the width to 100% directly in the HTML, then when building the gallery I sent the width as a blank string '' (single quotes), which I'm assuming would either skip over the width attribute in jQuery, or would set it to 'auto'. Either way, that's how to get the slideshow to work without setting the width.
    Updated 03-15-2010 at 03:07 AM by vol7ron