Question

我拼凑了一个来自不同来源的脚本，这有助于我在样式表无法加载时放置一些后备（特别是对我来说，Pictos服务器并不总是可靠的。）

这很好用，但由于某种原因在Firefox上失败，它不会在if语句中处理任何内容。我试过通过JSHint运行它并没有出现任何严重的问题。

有什么想法吗？

$(document).ready(function(){
    $.each(document.styleSheets, function(i,sheet){
      if(sheet.href==='http://get.pictos.cc/fonts/357/9') {
        var rules = sheet.rules ? sheet.rules : sheet.cssRules; // Assign the stylesheet rules to a variable for testing

        $('body').addClass('pictos-working');
        $('.pictos-fallback').hide(); // Hide fallbacks

        // If the stylesheet fails to load...
        if (rules.length === 0) {
            $('.pictos').hide(); // Hide Pictos tags so we don't get random letters
            $('body').removeClass('pictos-working'); // Remove 'working' class
            $('.pictos-fallback').show(); // Show fallbacks
        }
     }
    });
});

Answer 1

您的样式表检测方法不可靠。由于Same origin policy，样式表来自不同的域时，cssRules为null。

不是通过cssRules对象检测css规则的存在，而是检查是否正在应用样式表中的规则：

if ($('selector').css('property') === 'expectedvalue') {
    // Loaded
} else {
    // Not loaded.
}

Answer 2

一些可能有所改进的改进建议：

为什么嵌套if？因为你只有两个场景，所以使用if then else .. 你确定文件没有加载时cssRules是零吗？也许有一些标题或元数据加载..你在哪里找到这个属性？

我刚刚找到的内容：http://www.quirksmode.org/dom/w3c_css.html

检测样式表是否加载失败（不适用于Firefox）

2 个答案: