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 answer as well: stackoverflow.com/questions/22879099/… — mix3d
– mix3d, Commented Jul 10, 2015 at 20:49
@ODelibalta That looks pretty jQuery specific is there a more generic way I could check for bootstrap? — carloabelli
– carloabelli, Commented Jul 10, 2015 at 20:50
I believe this may be a more helpful resource: eddmann.com/posts/… — Devin H.
– Devin H., Commented Jul 10, 2015 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
– carloabelli, Commented Jul 10, 2015 at 20:56

Devin H. · Accepted Answer · 2015-07-10 21:55:59Z

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

Community · Accepted Answer · 2017-05-23 12:21:48Z

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, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 10, 2015 at 20:52

Orlando Paredes Hamsho

1166 bronze badges

2 Comments

carloabelli Over a year ago

Yeah wondering if there is a workaround for Bootstrap as the check looks jQuery specific.

Orlando Paredes Hamsho Over a year ago

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.

amyspark · Accepted Answer · 2015-07-10 20:56:19Z

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>

Collectives™ on Stack Overflow

Alternate CSS and javascript link

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related