3

I'm having a problem with Bootstrap + jquery loading from CDN sometimes it doesn't load/get imported from CDN for example : 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

It doesn't get loaded in the site when opened. What I want to do is to add the same file in my server too so if it fails to upload this from google server it would load it from mine. for example: 

<link rel="stylesheet" href="#mydomain#/css/bootstrap.min.css">

how can I do the above in a way that it won't load it twice if it successfully loads it from CDN (Is there's a way to do so or better way to achieve this?) thanks in advance

DirWolf
  • 871
  • 6
  • 22
  • are you sure it doesnt load? maybe your order of loading things isnt good, but cdn deliver pretty reliably – Alex Aug 20 '18 at 08:04
  • 3
    Possible duplicate of [Provide local fallback for CSS from CDN](https://stackoverflow.com/questions/17437199/provide-local-fallback-for-css-from-cdn) – Alex Aug 20 '18 at 08:08
  • yes, it's not getting loaded for some reason it happens with Jquery and with bootstrap. it's not constant but it happens sometimes which is a concern. – DirWolf Aug 20 '18 at 08:09
  • 1
    Why you don't always load from your server ? – executable Aug 20 '18 at 08:10
  • I've removed all the tags and added Javascript, since you don't want to use jQuery and the question is not *about* html or css. – Reinstate Monica Cellio Aug 20 '18 at 08:13
  • CDN supposed to be better and faster in loading. but in this case, is causing an issue. I was just wondering if there's a way to have both files linked but only load one – DirWolf Aug 20 '18 at 08:13
  • 1
    Well you can check if jQuery is loaded (https://stackoverflow.com/questions/7341865/checking-if-jquery-is-loaded-using-javascript) and if it's not loaded you can get it from your server – executable Aug 20 '18 at 08:15
  • Brilliant. thanks guys. I now got my answer. didn't get it when I searched but now I see it. – DirWolf Aug 20 '18 at 08:19

1 Answers1

1

This piece of codewill handle script load fails, and allow you to add a fallback attribute that will be loaded instead...

var scripts = document.querySelectorAll("script[data-fallback]");

[].forEach.call(scripts, function(script) {
  var listener = script.addEventListener("error", function() {
  var newScript = document.createElement("script");
  newScript.setAttribute("src", script.getAttribute("data-fallback"));
    document.querySelector("head").appendChild(newScript);
  });
});
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.fail"
  data-fallback="https://something-local.com/jquery.js"></script>

Note: This won't work on this page. It's just the nature of Stack Overflow's snippets. Here's a working jsfiddle demo instead...

http://jsfiddle.net/ArchersFiddle/pbfv6q4x/

If you open the console on that page you'll see the original script load error and then the output showing the fallback script was loaded.

Here's the same thing, but for stylesheets...

var stylesheets = document.querySelectorAll("link[rel=stylesheet][data-fallback]");

[].forEach.call(stylesheets, function(stylesheet) {
    var listener = script.addEventListener("error", function(e) {
    var newStylesheet = document.createElement("link");
    newStylesheet.setAttribute("rel", "stylesheet");
    newStylesheet.setAttribute("href", stylesheet.getAttribute("data-fallback"));
    document.querySelector("head").appendChild(stylesheet);
    });
});
Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67