码迷,mamicode.com
首页 > 其他好文 > 详细

当一个cdn挂掉之后,让加载另一个cdn

时间:2020-02-10 14:03:57      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:ice   top   app   win   依赖   https   java   解决   file   

我项目上之前都是用的bootCDN免费开源的,

近段时间bootcdn经常挂掉,导致项目瘫痪,

然后就向着如何在一个cdn挂掉之后,加载另一个cdn平台上的静态资源

网上拿jquery写了个例子:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js%22%3E%3C/script>
2     <script type="text/javascript">
3         if (!window.jQuery) {
4             document.write(‘<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js%22%3E%3C‘ + ‘/script>‘);
5         } 
6     </script>

上述方式如果加载一个cdn静态资源还好,如果加载多个cdn,比如bootstrap依赖jquery,那么加载顺序就是个问题,

然后发现了个非常简单的解决方式,就是将两个不同的cdn同时加载,即使有一个cdn平台挂掉了,另一个也会加载成功,毕竟两个cdn平台同时挂掉的几率很低

拿jquery打个比方,同时加载bootcdn和七牛cdn上的资源,这样,其中有一个挂了,另一个还会起作用的,就写死就行了,不用担心加载顺序问题

<!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>

 最后奉上七牛源静态资源cdn查询网地址:http://www.staticfile.org/

 

下面是我在一个项目中的一个使用例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="./static/js/compatibilityJS/ie-blocker.css">
    <script src="./static/js/compatibilityJS/ie-blocker.zhCN.js"></script>
    <![endif]-->
    <!-- summernote -->
    <link href="https://cdn.bootcss.com/summernote/0.8.12/summernote.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/summernote/0.8.12/summernote.css" rel="stylesheet">
    <!-- bootstrap -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- adminLte -->
    <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet" >
    <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet" >
    <!-- font-awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
    <!-- element.css -->
    <link href="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet">
    <title></title>
    <style>
        *{
          margin:0;
          padding:0;
          list-style: none;
          -webkit-overflow-scrolling: touch;/* 在移动端使关东更流畅 */
          -webkit-transform: translate3d(0, 0, 0);/*开启Gpu硬件加速*/
        }
        body{
          position: absolute;
          left:0;
          top:0;
          width:100%;
          bottom:0;
          overflow: hidden;
        }
        #appWrap{
          position: absolute;
          left:0;
          top:0;
          width:100%;
          bottom:0;
          overflow:hidden;
        }
        #app{
          position: absolute;
          left:0;
          top:0;
          width:100%;
          bottom:0;
          overflow:auto;
        }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We‘re sorry but meetingmanage doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="appWrap">
        <div id="app"></div>
    </div>
    <!-- vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
    <!-- vuex -->
    <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
    <script src="https://cdn.staticfile.org/vuex/3.1.1/vuex.min.js"></script>
    <!-- vue-router -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js"></script>
    <!-- element-ui -->
    <script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
    <script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script>
    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    
    <!-- laydate -->
    <script src="./static/js/laydate/layDate-v5.0.9/laydate/laydate.js"></script>
    <!-- summernote -->
    <script src="https://cdn.bootcss.com/summernote/0.8.12/summernote.min.js"></script>
    <script src="https://cdn.staticfile.org/summernote/0.8.12/summernote.min.js"></script>
    <script src="https://cdn.bootcss.com/summernote/0.8.12/lang/summernote-zh-CN.min.js"></script>
    <script src="https://cdn.staticfile.org/summernote/0.8.12/lang/summernote-zh-CN.min.js"></script>
    <!-- bootstrap -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- adminLte -->
    <script src="https://cdn.bootcss.com/admin-lte/2.4.10/js/adminlte.min.js"></script>
    <script src="https://cdn.staticfile.org/admin-lte/2.4.10/js/adminlte.min.js"></script>
    <!-- qiniu -->
    <script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
    <!-- qrcode -->
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <!-- js-wxsdk -->
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  </body>
</html>

 

 

 

当一个cdn挂掉之后,让加载另一个cdn

标签:ice   top   app   win   依赖   https   java   解决   file   

原文地址:https://www.cnblogs.com/fqh123/p/12290561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!