How to fallback from Zepto, to Google CDN jQuery, to local jQuery?

Question

I've seen pages that instruct or ask how to fallback from Zepto to jQuery (especially for IE), as here on SO and here on Zepto.js official page.
I've also seen examples on how to fallback from Google-hosted jQuery to a local site jQuery, as in Modernizr.load doc page.

My question is, how do I put the two things together? Possibly also without using Modernizr.load, just using proper <script> blocks?

Here's what I came up with, but it seems IE never finds the Google hosted version. Also, I'm not sure the Zepto = jQuery assignment works properly.

<script>
    document.write('<script src=' +
        ('__proto__' in {} ? 
            'js/vendor/zepto.min' : 
            'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min') +
        '.js><\/script>');
</script>
<script>
    if (window.jQuery) { 
        window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    }
    else
    { /* here jQuery could be rightly undefined because Zepto is loaded, 
         so this could be wrong. */
        document.write('<script src=' +
            'js/vendor/jquery-1.8.0.min' +
            '.js><\/script>');
    }
</script>
<script>
    if (window.jQuery) { 
        window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    }
    else
    {
        /* same problem as before */
        console.error('Zepto nor jQuery available!');
    }
</script>

Is there a better way? TA

Edit

After @Ashfame answer, this is what I've used:

<!-- Load local Zepto.js or (as a fallback) jQuery from Google CDN or (as a fallback) local jQuery -->
<script>
    document.write('<script src="' + ('__proto__' in {} ? 
        'js/vendor/zepto' : 
        'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery') + 
        '.min.js"><\/script>')
</script>
<script>
    window.Zepto || window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>');
</script>

I could not use the protocol-less/scheme-less URL of Google CDN as for some reason it didn't work on my local IE9 (it waits a lot, then always falls back to local).

I did not aliased anymore Zepto with jQuery: just used $ in JS code.

I don't seem to experience any problem related to jQuery loading out of order w.r.t. dependent code.

Fogy

I've also tried with //ajax.googleapis.com/..., that is without protocol prefix – Fogy

Tried also with this snippet probably by user @Sébastien Grosjean - ZenCocoon: it seemed to work fine, but then I didn't want to use the Cloudflare CDN, nor any other Zepto CDN. – Fogy

Also tried with Modernizr.load, but somehow it seemed a little bit too much for the purpose. I might be wrong of course. – Fogy

Answer 1

For the sake of trying this technique out, I would try this first:

I wrote this quickly along the line of how HTML5 Boilerplate loads a local fallback when jQuery CDN is down.

This might not work, but I don't see any reason why it shouldn't right now. Wanna give it a spin?

<script>document.write('<script src="' + ('__proto__' in {} ? 'cdn/zepto.min' :  'cdn/jquery.min') + '.js">\x3Cscript>');</script>
<script>window.Zepto || window.jQuery || document.write('<script src="cdn/jquery.min.js">\x3C/script>')</script>
<script>window.Zepto || window.jQuery || document.write('<script src="local/jquery.min.js">\x3C/script>')</script>

The only case it won't handle well is when the user is on a non-Zepto compatible browser like IE & at the same time jQuery CDN is down, then it will try to load the jQuery CDN again once and then ultimately fallback to local copy of jQuery.

---

But practically speaking, if I were to implement this, I would just have 1 single fallback to local. Like try checking whether we can load Zepto, or jQuery, and in the next step, if neither of them was loaded, load local library. Better to have something working in place, rather than trying to optimize something which won't return that much gain. Optimize wisely! It can be very likely that the above technique #1 will have its own cavets of cross browser compatibilities.

---

I just found out this issue where it says, even this technique (being used & recommended by HTML5 Boilerplate & Modernizr) is not reliable. Check this issue - document.write fallback causing jQuery to load out of order

Another solution in that question talks about a library Yepnope. You can check how it works - https://mcmap.net/q/1624381/-document-write-fallback-causing-jquery-to-load-out-of-order

Lastly I would end this answer by saying that unless you are building something that will totally be your code, like not running into the wild with the possibilities of its user adding more stuff on the page, don't bother yourself about it that much because you will quickly run into issues with such techniques, because other script might load out of order and cause issues, whereas if its all your code, you can probably make everything load & work as per your logic of fallbacks.

Colmar

Thanks for your answer. In the end I used your version, but just removing the double try on Google CDN. In my case: if it works the first time, fine, otherwise for the sake of speed (the main purpose of using a CDN) it'll just go for the local jQuery. – Fogy