简单检测CDN链接是否有效

CDN链接经常是使用的。但是，CDN链接挂了怎么办，因此，就要调用使用本站点的库，那么怎么实现呢？

检测CDN的jquery链接是否有效（这种方法比较简单）

<script src="" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"></script>')</script>

那么，问题来了，假如我要检测其他CDN呢？如使用bootstrap框架的js与css呢?

本人就想了一个比较简单的方法（同步方式）

...
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
...

<script>
      //判断cdn是否有效
      $.when(
          //同步方式发送请求
          $.ajax({
              url: "https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css",
              async: false
          }),
          $.ajax({
              url: "https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js",
              async: false
          })
          //如果链接失效，就写入本地的链接
          ).fail(function() {
              $("link[href='https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css']").after(" < link rel = 'stylesheet' href = 'css/bootstrap.min.css' > ");
              $("script[src='https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js'").after(" < script type = 'text/javascript' src = 'js/bootstrap.min.js' > < /script>");
          });
 </script>

使用requirejs加载（异步方式）

<!doctype html>
<html>
    <head>
        <title>requirejs</title>
        <meta charset="utf-8">
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>
        <span>requirejs</span>
    </body>
</html>

main.js

require.config({
    paths: {
        //配置cdn与本地jq
        jquery: ['http://cdn.bootcss.com/jquery/2.0.0/jquery.min', 'jquery-2.0.0.min'],
    },
    map: {
        //这个是require-css插件，即css.min.js
        '*': {
            'css': 'css.min' 
        }
    },
});

require(['jquery'], function($) {
    alert("jquery load");
});
//引入的写法是插件写法，直接在这里写路径
require(['css!../css/a.css'], function() {
    alert('stylesheet load');
});

a.css

span{
    font-weight:bold ;
}

PS：学习了一下requirejs这个库，原理是动态生成<script>标签，这个库比较适合管理引入过多的js库，可以提高web前端页面性能。（使用css就要引用require-css插件）

如果引入js（或者css）比较少的话，就不必使用这个库了。

简单检测CDN链接是否有效

相关推荐