javascript - 如何为未加载、加载时间过长和阻塞的 css 文件编写回退？

Question

<分区>

Answer 1

免责声明

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

无论如何，我已经创建了一个 new demo对于我更新的答案，考虑到您需要检查多个 cdn css 文件以及这可能如何影响您的网站性能。 (我在 head 中使用了 XMLHttpRequest() 方法，根据 this cool guy 速度更快，因为它不检索页面正文。

我还提供了一种格式来轻松替换失败的外部 <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" (..) >

注意事项

• A <link>如果它的响应状态是0(不允许)或404(未找到)，这将失败，这意味着如果样式表在线但它的服务器没有Access-Control-Allow-Origin="*"政策它也会认为它失败了。 (幸运的是，大多数 cdn 都有它，包括您的)。
• 在另一个问题中选择的答案无效，因为 document.styleSheets.cssRules在外部样式表中返回 null在 Chrome 和 Firefox 中只会直接向您抛出安全错误。

希望对您有所帮助! :)