css引入cdn失败后请求本地

当我们在使用CSS引入CDN的时候，有时候出现了CDN引入失败的情况，该怎么办？此时，我们可以选择在CDN引入失败时请求本地CSS文件，来达到顺利加载网页的目的。

/* 判断CDN是否可用 */function isCDNAvailable(){
      var link = document.createElement("link");
      link.href = "https://cdn.jsdelivr.net";
      link.rel = "dns-prefetch";
      document.head.appendChild(link);
  return link.onload = link.onerror = function() {
        return /loaded|complete/.test(link.readyState) ? !0 : !1;
  }
    ;
}
/* 加载CSS文件 */function loadCSSFile() {
      var link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = 'style.css';
      document.head.appendChild(link);
}
    /* 用户从CDN引用的CSS地址 */var cssLink = 'https://cdn.jsdelivr.net/gh/example/style.css';
/* 判断CDN是否可用 */if(isCDNAvailable()){
      /* CDN可用，直接引用CDN的CSS地址 */  var link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = cssLink;
      document.head.appendChild(link);
}
 else {
      /* CDN不可用，加载本地CSS文件 */  loadCSSFile();
}
    

上面的代码是检测CDN是否可用，如果可用就直接引用CDN的CSS地址，否则就加载本地的CSS文件。在实际应用中，我们可以把CDN的CSS地址放在一个变量中，方便使用和修改。此外，可以通过更改本地CSS文件的地址和名称，从而控制网页显示的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！