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

我项目上之前都是用的bootcdn免费开源的，

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

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

网上拿jquery写了个例子：

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

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

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

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

<!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>