document.write fallback causing jQuery to load out of order

Question

I'm building a new site using HTML5 Boilerplate 4.0, and am running into trouble with its jQuery local fallback code. The code in question is here:

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

I'm developing locally, for now, so I've commented out the CDN line. My problem is that jQuery does load, but it loads after plugins.js and main.js, leading to undefined errors.

The closest to maybe an explanation I've found is the #4 point of this previous answer, which suggests this would be expected, but... the above is easily the most used local fallback code for jQuery, and it's H5BP, which is heavily vetted. I must be missing something, yes?

Teredo

Answer 1

I answered a similar question some time ago.

You can do something like this:

function loadScript(pathToScript, callback) {

    if (/jquery/.test(pathToScript) && window.jQuery) {
        //jQuery has already been loaded so simply call the callback
        callback.apply();

    } else {
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");

        script.type = "text/javascript";
        script.src = pathToScript + "?t=" + new Date().getTime(); //prevent caching

        if (callback) {
            script.onload = callback;
        }

        head.appendChild(script);
    }
}

var scripts = ['js/vendor/jquery-1.8.1.min.js', 'js/plugins.js', 'js/main.js'];

(function (i) {
    if (i < scripts.length) {
        var self = arguments.callee;

        loadResource(scripts[i], function () {
            self(++i);
        });
    }
})(0);

Ambi

Answer 2

Neither did I find a precise answer on StackOverflow about this issue, however, it seems that this page covered the subject :

To sum up - creating a truly robust failover solution is not simple. We need to consider browser incompatabilities, document states and events, dependencies, deferred loading and time-outs! Thankfully tools like LABjs exist to help us ease the pain by giving us complete control over the loading of our JavaScript files.

• http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/

Note : solution relies on the use of LABjs

Prosthodontics

Answer 3

You may consider using yepnope to load your scripts in parallel with the fallback.

From their website:

yepnope.js has the capability to do resource fallbacks and still download dependent scripts in parallel with the first.

And the code:

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

I hope this help!

Schinica