Alternate CSS and javascript link

Question

I was wondering if its possible to provide an alternate link if the CDN cannot be reached. For instance for bootstrap provide the tags to download from the CDN and if that cannot be reached provide the locally stored bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- if cannot be downloaded -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

I would like to use this model because browsers cache CDN files so that speed could be improved by using this (also their download times are probably better than my servers). Though on the off chance that someone is connecting via the local network but not connected to the internet and does not have one of these cached versions I would like an alternative. Is this possible?

[This might help](http://stackoverflow.com/questions/5257923/how-to-load-local-script-files-as-fallback-in-cases-where-cdn-are-blocked-unavai) — ODelibalta, Jul 10 '15 at 20:48
This answer as well: http://stackoverflow.com/questions/22879099/how-to-implement-a-cdn-failsafe-for-css-files — mix3d, Jul 10 '15 at 20:49
@ODelibalta That looks pretty jQuery specific is there a more generic way I could check for bootstrap? — carloabelli, Jul 10 '15 at 20:50
I believe this may be a more helpful resource: http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/ — Devin H., Jul 10 '15 at 20:54
@DevinH. perfect. You should turn into an answer so that I can accept because neither of the other two answer in entirety — carloabelli, Jul 10 '15 at 20:56
@DevinH. You should totally, and i'm probably also going to use that, so i'll be sure to up-vote it if you give me a heads-up. — Orlando Paredes Hamsho, Jul 10 '15 at 21:20

score 2 · Accepted Answer · answered Jul 10 '15 at 21:55

http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

That link answers both parts of the question.

For your example, with fallback.js:

HTML:

<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

JS:

cfg({
    "libs": {
        'css$bootstrap': {
            'exports': '.col-xs-12',
            'urls': 'css/bootstrap.min.css'
        },
        'bootstrapjs': {
            'urls': [
                'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',
                'js/bootstrap.min.js'
            ]
        }        
    }
});

req(function(css$bootstrap, bootstrapjs){ //Everything is loaded });

It appears the article above is a bit outdated on the fallback.js API, so I've included the example based on current state. https://github.com/dolox/fallback/blob/master/README.md

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

I just used this for a site i've been building lately, let me know if this is what you had in mind:

<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="/path/to/file"><\/script>')
    </script>

Perhaps you can use something similar for your bootstrap loading, i'll look more into it in the men time, let me know if it helps.

Edit:

Also found this thread question someone else made, could be of use:

how to fallback twitter-bootstrap cdn to local copy

edited May 23 '17 at 12:21

Community

1
1

answered Jul 10 '15 at 20:52

Orlando Paredes Hamsho

116
6

Yeah wondering if there is a workaround for Bootstrap as the check looks jQuery specific. – carloabelli Jul 10 '15 at 20:53
Just edited my post, what you want is a cdn fallback for bootstrap, but there doesn't seem to be an object for it, the thread I linked to gives an answer to the question. – Orlando Paredes Hamsho Jul 10 '15 at 20:55

score 0 · Answer 3 · answered Jul 10 '15 at 20:56

For the css part, see the answer here: How to implement a CDN failsafe for css files?

For the js part, see: Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

TL;DR:

<link rel="stylesheet" type="text/css" href="cdnurl/styles.css" onload="alert('loaded')" onerror="javascript:loadCSSBackup()" />

<script type="text/javascript>
    function loadCSSBackup(){
        var css = document.createElement("link")
        css.setAttribute("rel", "stylesheet");
        css.setAttribute("type", "text/css");
        css.setAttribute("href", 'backup/styles.css');
        document.getElementsByTagName("head")[0].appendChild(css);
    }
</script>

For loading a fallback JS, you can use (taken from the answer above):

<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
        window.jQuery || document.write('<script src="/path/to/file"><\/script>')
</script>

Alternate CSS and javascript link

3 Answers3