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

我将不同来源的脚本拼凑在一起，这有助于在样式表加载失败时放置一些回退（专门针对我而言，Pictos服务器并非总是如此可靠）。检测样式表是否无法加载（不适用于Firefox）

这很好，但由于某种原因在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 
     } 
    } 
    }); 
});

来源

2012-07-01 SparrwHawk

您可以提供一个实时链路测试的情况下？ –

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

而不是通过cssRules对象检测CSS规则的存在，检查是否被应用于从样式表的规则：

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

来源

2012-07-01 14:40:58

嗯问题是，我真的没有任何控制 - 这是什么Pictos生成 - http://pastebin.com/zJsC47qt – SparrwHawk

我试过$（document）.ready（function（）{ \t if（ $（ '@字体面'）。CSS（ 'FONT-FAMILY'）=== 'PICTOS定制'）{ \t警报（ “装”） \t}其他{ \t警报（ “不装”） \t} }）;但这似乎并不奏效，有什么建议？ – SparrwHawk

@SparrwHawk @ font-face不是有效的jQuery **选择器**。既然你的样式表只包含一个'@ font-face'规则，你唯一剩下的检测方法就是测量渲染字体的大小。看看字体特征检测方法的源代码，比如[这个答案]（http://stackoverflow.com/questions/10339268/is-there-a-way-to-detect-whether -a用户浏览器-被支撑用字体面）。这个想法是：1.获取当前尺寸。 2.设置新的字体系列。 3.检查尺寸是否改变。 –

只是一些改进的建议，这可能有助于：

为什么嵌套如果？因为只有两种情况，所以如果其他情况下使用.. 确定当文件未加载时cssRules为零？也许有一些标题或元数据加载..你在哪里找到这个属性？

东西，我只是发现：http://www.quirksmode.org/dom/w3c_css.html

来源

2012-07-01 14:45:18

我看不出任何可能的方式来将嵌套的if语句重构为if else语句，考虑到第二个if语句取决于第一个条件被评估为true。 –

是的，安东尼是对的，我无法看到它的方式。仍然无法看到解决此问题的方法： -/ – SparrwHawk

Rob W的答案是正确的。 –

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

回答

相关问题