Launchpad

The Google hosted JavaScript libraries is a great service and another wonderful idea by the people at Google. Sharing large framework code between multiple sites not only makes your visitors happy – because they now only need to cache a potentially large library once – but also removes the burden of hosting and even updating that library, yourself.

That being said however, it is often necessary to extend the basic AJAX frameworks (jQuery, Prototype, Scriptaculous, etc.) with 3rd party or custom plugins. When using the Google hosted AJAX libraries, properly loading those plugins isn’t as straightforward as it used to be.

Using jQuery as an example, if you just attempt to load your plugin file with a simple script call then you’ll notice that jQuery is not defined, or you may even get the $(..) function does not exist. This occurs your plugin files call framework methods before your client has completely downloaded and executed the framework code.

It is important to note that the google.load call is performed asynchronously, so as to not slow your overall page response. Therefore, you must now account for that:

// Be sure to first include the Google AJAX libraries script in your HTML.
// <script src=“http://www.google.com/jsapi” type=“text/javascript”></script>
 
// Wrap your plugin in a function to execute after jQuery has downloaded and 
// loaded to your client.
function load_jquery_form_plugin() {
  /*
   * jQuery Form Plugin
   * version: 2.24 (10-MAR-2009)
   * @requires jQuery v1.2.2 or later
   */
  ;(function($) {
    // This is the supplied file from the plugin.  I’ve truncated about 600
    // lines of code here. :)
  }
}
 
// Load the jQuery framework.
google.load(“jquery”, “1.3”);
 
// Declare a callback to run after the jQuery has loaded, but before HTML 
// images and things have completed (at DOM ready, instead of at the BODY 
// onload event).
google.setOnLoadCallback(function() {
  load_jquery_form_plugin();
}, true);
 

In this case, I wrapped the 3rd party plugin – jQuery Form Plugin – with a custom function, creatively called load_jquery_form_plugin. After I load the framework, I use the google.setOnLoadCallback to call that function as soon as the framework is loaded and the DOM is ready. That true value, instructs Google not to wait until all images are loaded, but instead execute as soon as possible.