javascript - 加载 fontawesome 的回退计划

Question

更新:为了让我的问题更清楚，我引用了以下代码片段并实现了类似的东西-

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

我正在以这种方式加载 font-awesome.css 和我的 JSP 中的回退-

<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" />

<script>
    function fallbackForFontAwesome() {
        if (typeof bootstrapcdn == "undefined") {
            document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E'));
            if (typeof cloudflare == "undefined") {
                document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));
            } else {
                alert('loading from cloudfare');
            }
        } else {
            alert('loading from bootstrap cdn');
        }
    }
    fallbackForFontAwesome();
</script>

根据此代码片段，我预计 alert('loading from bootstrap cdn'); 会执行。但它没有。代码 if (typeof bootstrapcdn == "undefined") 和 if (typeof cloudflare == "undefined") 检查 css 是否已经从各自的 URL 加载？我哪里出错了吗？

Answer 1

您可以通过创建一个使用 FontAwesome 的“fa”类的跨度然后测试其字体来测试 FontAwesome 是否已加载。然后删除跨度并返回结果。

function isFontAwesomeLoaded() {
    var span = document.createElement('span');
    span.className = 'fa';
    document.body.appendChild(span);
    var result = (span.style.fontFamily === 'FontAwesome');
    document.body.removeChild(span);
    return result;
}

这个函数会给你一个 true 或 false 的结果，所以你可以使用加载本地回退(document.write 等)如果 false。