Question

我在从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成功加载它，我该如何避免两次加载（有没有办法做到这一点，或者有更好的方法来实现这一点？）预先感谢

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

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

1 个答案: