如果无法加载CDN,如何在本地加载资源而不是CDN?

时间:2018-08-20 08:03:01

标签: javascript html5

我在从CDN加载Bootstrap + jquery时遇到问题,有时它无法从CDN加载/获取 例如:

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

打开后不会加载到网站中。 我想做的是也在我的服务器中添加相同的文件,因此,如果它无法从google服务器上载此文件,则会从我的文件中加载它。 例如:

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

如果通过CDN成功加载它,我该如何避免两次加载(有没有办法做到这一点,或者有更好的方法来实现这一点?)预先感谢

1 个答案:

答案 0 :(得分:1)

这段代码将处理脚本加载失败,并允许您添加一个将替代加载的后备属性...

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>

注意:此功能不适用于此页面。这只是Stack Overflow片段的本质。这是一个有效的jsfiddle演示...

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

如果在该页面上打开控制台,则会看到原始脚本加载错误,然后显示后备脚本的输出已加载。

这是同一件事,但对于样式表...

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);
    });
});