How to load local script files as fallback in cases where CDN are blocked/unavailable?

Question

I’m using a CDN for the following javascript:

• https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
• https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js

For each one, how can I revert to using local copy in the instance where it may be blocked/unavailable?

Answer 1

To confirm that cdn script loaded you can check for existence any variable/function this script defines, if it is undefined - then cdn failed and you need to load local script copy.

On this principle are based solutions like that:

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

(if there is no window.jQuery property defined cdn script didn't loaded).

You may build your own solutions using this method. For instance, jquery tooltip plugin creates $.tooltip() function so we can check it with code like this:

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>