在 Firefox 中添加动态样式表时会触发 jQuery 加载事件吗？

Question

我在 jQuery 中运行以下代码来动态加载样式表。其目的是允许用户加载自定义样式表并更改 JavaScript 小部件的外观：

this.loadStyleSheet = function(url){
    $("<link rel='stylesheet' type='text/css' />").attr("href", url).appendTo("head");
}

屏幕瞬间出现跳动，因为只有在加载动态样式表后才会将正确的样式应用于小部件。为了解决这个问题，我需要知道动态样式表实际上是什么时候完成加载的。

虽然这个问题has been discussed before，但没有一个解决方案适用于我的情况：

1. .load() 仅在 IE 中触发，而不在 Firefox 中触发。需要跨浏览器解决方案。顺便说一句，.ready() 在样式表完成加载之前触发。
2. .get() 仅适用于同一域。在我的例子中，样式表可能来自任何给定的域。
3. 无法通过 setTimeout 查询要更改的某些 CSS 属性。用户可能指向任何自定义样式表，但无法知道她的 CSS 文件将包含什么。
4. 通过 setTimeout 加载样式表后等待一段时间显然是一个糟糕的解决方案。没有办法提前知道样式表需要多长时间才能加载，如果它会加载的话。

关于这个问题有什么新想法吗？非常感谢您的帮助。

Answer 1

我最近遇到了同样的问题。我的解决方案是保持就绪事件并在 css 页面加载后释放它。我使用了$.holdReady jQuery 命令在 document.ready 代码之外。那么，如何在 css 加载时触发事件？我在链接标签上使用了 onload 命令。代码：

$.holdReady(true);

$('head').append($('<link rel="stylesheet" type="text/css" 
    onload="$.holdReady(false)"/>').attr('href','myCSS.css'));


$(document).ready(function() {
    ...code here to execute after css loads
})

它适用于 FF 16。尚未检查不同版本或浏览器。另外，我认为链接标签上的 onload 事件纯粹是 HTML5。

Answer 2

“.load() 仅在 IE 中触发，在 Firefox 中不触发。需要跨浏览器解决方案。顺便说一句，.ready() 在样式表完成加载之前触发。”

这很奇怪，.load() 在 Firefox 中对我有用。

“无法通过 setTimeout 查询要更改的某些 CSS 属性。用户可能指向任何自定义样式表，并且无法知道她的 CSS 文件将包含什么。”

虽然肯定不是一个理想的解决方案，但为什么不要求将某个字符串写入 css 文件的 cmets，然后您可以对其进行正则表达式？

其他想法： 您是否考虑过使用 propertychange 事件？

$(body).bind('propertychange', function(){ show_my_page_after_timeout(); });

这样您可以隐藏可能更改的页面元素，允许浏览器处理 css，然后在处理完成时显示这些元素（您甚至可以淡出和淡入）。如果在超时显示您的页面之前再次调用事件处理程序（例如 css 属性已更改），您可以通过设置一个短暂的超时来取消此操作。

Answer 3

如果其他人需要对此的答案，请扩展我上面的评论：

您的 Javascript 将如下所示：

var style = $('<style type="text/css">');
$(document).append(style);
style.load('/fetchstyle.php', { url: "http://somesite.com/style.css" }, function() {
    // The styles are loaded
});

而 fetchstyle.php 脚本看起来像这样：

<?php
echo file_get_contents($_GET['url']);

未经测试，但这个概念应该可行。