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

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

您的样式表检测方法不可靠.cssRules是null因为相同的原始策略,样式表来自不同的域.

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

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