javascript - 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)？

Question

前提:我找到了这两个答案，但我不明白如何将其系统地应用于许多库:

Detect and log when external JavaScript or CSS resources fail to load

HTML if statement to load local JS/CSS upon CDN failure

我有一个 Augular 1.x 应用程序，它依赖于多个库，其中许多托管在 CDN 或外部服务器上。 不幸的是，当用户离线、Internet 连接不正常或存在 (CDN) 服务器问题时，某些库偶尔会无法下载并加载。

在这种情况下，我想向用户显示类似“出现错误。请重新加载或稍后重试”的 View 。

我的疑虑是:假设库只是通过以下方式在 index.html 中加载(一些 其中甚至异步):

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.css">

css(在head内)和

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>

for JS(在body的末尾)

如何检测单个库的下载(加载)失败？ (事实上​​ ，假设由于连接错误而无法加载 Angular，整个应用程序将无法运行。但我有几个强制性库)

或者我是否应该优先考虑可靠性(即在本地加载库)而不是性能(即缓存的 CDN)？ 此外，我认为必须明确指出某些库(例如 Google Apis)不能真正下载或通过 Bower 安装。

Answer 1

只需在标签中添加一个 onerror 处理程序。这可以调用回退，给用户一条消息等。

例子

使用不存在的 url 会在此处弹出警告:

<link 
   onerror="alert('woa, error')" 
   rel="stylesheet" 
   href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx" 
>

对于自定义函数，只需在链接标记之前的标题中定义一个脚本 block ，这样您就可以调用自定义函数:

<script>
  function myFunction() {alert("whaaaa.."); /* or something more meaningful */}  
</script>

<link 
   onerror="myFunction()" 
   rel="stylesheet" 
   href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx" 
>