gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 06:57:05 27 4
gpt4 key购买 nike

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

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 安装。

最佳答案

只需在标签中添加一个 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"
>

关于javascript - 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30546795/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com