Loading if Jquery if it failed to load

Question

I am trying to load jquery on to a page that may or may not have jquery. I simply use the typeof to determine if it is loaded. My problem is that I want to check and see if it has been loaded after I load it from my CDN. That way if my CDN fails I can fall back to Google to make sure that code still loads. The only way I have gotten this to work so far is that I have to use two different Javascript files. I get no console errors what so ever. So to test I changed the URL of my CDN so that it wouldnt work, it loads all four lines of code. It doesnt ever see the first conditional being loaded. How can I check after my first conditional statement to see if jQuery was loaded successfully or not?

if (typeof jQuery == 'undefined') {
    document.write("<script type=\"text\/javascript\" src=\"http:\/\/mysite\/scripts\/jquery-1.8.3.min.js\"><\/script>");
    document.write("<script type=\"text\/javascript\" src=\"http:\/\/mysite\/scripts\/jquery-ui-1.9.2.min.js\"><\/script>");
}
if (typeof jQuery == 'undefined') {
    document.write("<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"><\/script>");
    document.write("<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.9.2\/jquery-ui.min.js\"><\/script>");
}

Searched on Google, found [this](http://www.ejeliot.com/blog/109) — silentw, Apr 12 '13 at 14:19
@alexn, not quite the same, this is about how to conditionally add jQuery from a CDN with a local fallback if it wasn't already on the page. — zzzzBov, Apr 12 '13 at 14:26

score 2 · Answer 1 · answered Apr 12 '13 at 14:25

2

You need to execute the scripts as separate <script> elements. The first one adds jQuery from the CDN if it wasn't already on the page. The document.write call will inject a new <script> element before the later call to window.jQuery || ... so if the CDN is up, it will load jQuery.

If the CDN is down, jQuery will still not be defined, so the local fallback may be used:

<script>
    //add jQuery if it doesn't exist on the page yet
    window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>');
</script>
<script>
    //add jQuery if the CDN happens to be down
    window.jQuery || document.write('<script src="/scripts/jquery-1.8.3.min.js"><\/script>');
</script>

answered Apr 12 '13 at 14:25

zzzzBov

174,988
54
320
367

This script is used on many pages of many sites, so it is an external javascript file. So the only way to accomplish that then is use two different external scripts correct? – ios85 Apr 12 '13 at 14:27
@ios85, that would add 2 additional HTTP requests to the page load, and slow things down even more. You should probably consider using something like [requirejs](http://requirejs.org/) to assist in loading dependencies. – zzzzBov Apr 12 '13 at 14:30
Thanks! I was trying to determine if it was possible without using a framework like requirejs. It seems that would be my only real choice since it is impossible to determine if jquery has loaded in the same script block. And I dont really want to add extra requests. – ios85 Apr 12 '13 at 14:34
Of course it's possible without a framework. The frameworks have to be able to do it somehow. :) The question is whether it's worth your time and trouble to replicate that functionality. – cHao Apr 12 '13 at 14:35
@ios85, requirejs itself will be an additional request, however it'll smooth out much of the dependencies overall that it tends to be worthwhile. You could do some asynchronous loading, but then you'd have to have all subsequent scripts wait until jQuery was loaded async. – zzzzBov Apr 12 '13 at 14:35

score 0 · Answer 2 · answered Apr 12 '13 at 14:19

0

Could be what you are looking for, adapt to your needs:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
        window.jQuery || document.write('<script src="mylocalPath/jquery.js"><\/script>')
</script>

answered Apr 12 '13 at 14:19

A. Wolff

74,033
9
94
155

Loading if Jquery if it failed to load

2 Answers2