初始源不可用时，如何从其他源加载JavaScript与CSS？附可用链接

嘿，这个场景我可太熟悉了——依赖的CDN挂了直接影响页面功能，得提前做好兜底方案。下面是几个实用的方法，帮你在主源不可用时无缝切换到备用资源：

1. 针对单资源的快速Fallback #

脚本类资源（比如jQuery） #

利用JS检查全局对象是否存在，判断资源是否加载成功，失败就动态写入备用脚本：

<!-- 优先加载主CDN资源 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 检查jQuery是否加载成功，失败则加载备用CDN -->
<script>
window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"><\/script>');
</script>

要是连备用CDN也担心出问题，最后还可以加个本地资源作为终极兜底：

window.jQuery || document.write('<script src="/local/assets/jquery.min.js"><\/script>');

样式类资源（比如jQuery UI的CSS） #

CSS没法像脚本那样检查全局对象，不过可以用onerror事件触发切换：

<link 
  rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"
  onerror="this.href='https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/jquery-ui.css'"
>

当主CSS加载失败时，浏览器会触发onerror，自动把地址换成备用CDN的链接。

2. 多源链式加载（更灵活的方案） #

如果有多个备用源，或者需要处理依赖顺序（比如jQuery UI必须等jQuery加载完），可以封装一个简单的加载函数，依次尝试各个资源：

function loadScript(urls, callback) {
  if (!urls.length) {
    console.error('所有备用资源都加载失败了');
    return;
  }
  const currentUrl = urls.shift();
  const script = document.createElement('script');
  script.src = currentUrl;
  // 加载成功时执行回调
  script.onload = () => callback && callback();
  // 加载失败时尝试下一个源
  script.onerror = () => loadScript(urls, callback);
  document.head.appendChild(script);
}

// 调用示例：先试cdnjs，再试jsdelivr，最后本地
loadScript(
  [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
    'https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js',
    '/local/js/jquery.min.js'
  ],
  () => {
    // jQuery加载完成后，再加载jQuery UI
    loadScript([
      'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js',
      'https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/dist/jquery-ui.min.js',
      '/local/js/jquery-ui.min.js'
    ]);
  }
);

这个方法能严格保证资源的加载顺序，也能批量处理多个备用源，非常适合复杂的依赖场景。

3. 常用的备用CDN源推荐 #

平时可以把这些稳定的CDN作为备选：

• jsdelivr
• unpkg
• BootCDN

当然，最稳妥的还是把核心资源备份一份到自己的服务器，作为最后一道防线。

内容的提问来源于stack exchange，提问作者Serhii Bazavluk