Load jQuery Mobile script asynchronously?

Question

Has anyone tried to implement the loading of jQuery Mobile with accompanying scripts asynchronously with the help of head.js or using another method? I am experimenting with it right now, and while it gives a huge performance boost, it seems to break navigation (particularly hashchanged event handling). So I wonder if someone can share his/her experience with it.

UPDATE: The problem with hashchanged event turned out to be caused by another component. So do implement async loading of jQM and other of your JavaScript assets, it is safe and hugely improves load times and performance of your JS app. I use head.js to accomplish that, you can use whatever works best for you.

Answer 1

This is exactly what a package like RequireJS is for. Using a module loader like RequireJS allows you to asynchronously load multiple JS files, and define callbacks for when the files are loaded.

Here's a simple example...

Instead of loading your jQuery, and/or other JS files, the only <script> to load is the RequireJS script.

<script data-main="js/app" src="js/require.js"></script>

The data-main attribute tells RequireJS to load the file at /js/app.js, which contains your RequireJS config settings. Here's an example of /js/app.js:

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min"
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

In this case, /js/app.js is used mostly for configuring paths. The app property tells RequireJS where to look for your specific app JS, and the jquery property tells RequireJS the path to the Google CDN URL for jQuery. Finally, use the requirejs() method to load your apps .js file. Notice that all paths leave off .js.

At this point RequireJS is going to look for your app JS at app/main.js. Create a file in /js/app/ named main.js - so you now have a /js/app/main.js file.

This file is going to load both the jQuery and jQuery Mobile files from the Google CDN, asynchronously, and contain the rest of your app logic. Here's an example of /js/app/main.js:

define(["jquery", "jqueryMobile"], function($) {
    //jQuery and jQuery Mobile have been loaded.
    $(function() {
        // Do stuff with jQuery and jQuery Mobile
    });
});

What effect does this have? Let's look at the network waterfall to see how the files are loading:

The diagram above shows both jQuery and jQuery Mobile loading asynchronously.

For a similar demo, see the RequireJS jQuery example .