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

Question

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

有人可以帮我解决这个问题吗？

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

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

请教我如何正确创建此条件函数？

Answer 1

免责声明

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

无论如何，我创建了一个 new demo for my updated answer taking into consideration your need to check for multiple cdn css files and how that may affect your websites performance. (I've used the head method in the XMLHttpRequest() which is faster according to this cool guy，因为它不会检索页面正文。

我还提供了一种格式，可以轻松替换失败的 external <link> 标签，它们的 local 对应标签。

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（用于 [= 名称之间的键值关系） 52=]external 样式表，以及 local 样式表的名称）。

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 在外部样式表中 returns null 在 Chrome 中，而 Firefox 只是直截了当地抛出一个安全错误。

希望对您有所帮助！ :)

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

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

javascript

css

cdn

conditional-statements

fallback

免责声明

JavaScript

用法

HTML

已修改 JavaScript

备注