如何为未加载、加载时间过长和被阻止的css文件编写回退

How to write a fallback for css files not loaded, loading too long and blocked?

本文关键字：加载 css 文件 写回 回退 时间      更新时间：2023-11-14

我正试图为我的css文件编写一个条件语句，因为我希望在CDN上托管它们。无论如何，我需要为它写一个后备方案，所以如果CDN遇到可能的停机时间，我可以立即在自己的服务器上运行该文件。问题是我写javascript的知识还很初级，所以我不知道如何写这个脚本。

有人能帮我吗？

下面的代码是我希望在CDN上使用的代码：

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.min.css">

请教育我如何正确创建这个条件函数？

免责声明

似乎所有这些非常善良的人都将你的问题标记为重复，但他们没有注意到为该问题提供的答案不起作用（答案来自2011看在上帝的份上，看看为什么它在笔记中不起作用）。我已经把它标记给了主持人，看看他们是否可以取消标记。

无论如何，我已经为我的更新答案创建了一个新演示，考虑到您需要检查多个cdn-css文件，以及这可能会如何影响您的网站性能。（我在XMLHttpRequest()中使用了head方法，根据这个酷家伙的说法，它更快，因为它不检索页面正文。

此外，我还提供了一种格式，可以轻松替换失败的外部<link>标记，这些标记是本地对应的。

JavaScript

CSSback = {
    local: "cssfallback/",
    fallbacks: {
        "animate.min.css": "localanimate.css",
        "nonexistent.min.css": "localnonexistent.css"
    }
}
CSSback.init = function () {
    var links = document.head.querySelectorAll("link");
    for (var i = 0, l = links.length; i < l; i++) {
        var link = links[i];
        this.ping(link);
    }
}.bind(CSSback);
CSSback.ping = function (link) {
    var url = link.href;
    var http = new XMLHttpRequest();
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status != 200) this.fallback(link);
    }.bind(this);
    http.open("head", url, true);
    http.send();
}.bind(CSSback);
CSSback.fallback = function (link) {
    var url = link.href.split("/");
    var name = url[url.length - 1];
    var fallback = this.fallbacks[name];
    if (fallback) {
        link.parentNode.removeChild(link);
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = this.local + fallback;
        document.head.appendChild(link);
    }
}.bind(CSSback);
window.addEventListener("load", CSSback.init);

用法

您应该修改CSSBack{}的local（用于本地样式表的路径）和fallbacks（用于外部样式表的名称和本地格式表的名称之间的键值关系）。

HTML

<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.min.css" (..) >
<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/nonexistent.min.css" (..) >

修改的JavaScript

CSSback = {
    local: "cssfallback/",
    fallbacks: {
        "animate.min.css": "localanimate.css",
        "nonexistent.min.css": "localnonexistent.css"
    }
}

如果任何<link>失败，它将删除它并用它的本地对应物替换它，在这种情况下，nonexistent.min.css将失败并被替换，留下最终的<link>标签：

<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.min.css" (..) >
<link href="cssfallback/nonexistent.css" (..) >

备注

  • 如果<link>的响应状态为0（不允许）或404
  • 另一个问题中选择的答案不起作用，因为外部样式表中的document.styleSheets.cssRules在Chrome中返回null，而Firefox只是直接向您抛出一个安全错误

希望它能有所帮助！：）

相关文章：