在Firefox中添加动态样式表时，jQuery可以加载事件吗？

Question

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

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

对于瞬间，屏幕显示为跳跃，因为仅在加载动态样式表后才将正确的样式应用于窗口小部件。 要解决这个问题，我需要知道动态样式表何时完成加载。

虽然之前已经讨论过这个问题，但在我的案例中没有一个解决方案适用：

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

有关此问题的任何新想法？ 非常感谢您的帮助。

Answer 1

我最近遇到了同样的问题。 我的解决方案是保存ready事件并在加载css页面后释放它。 我在document.ready代码之外使用了$ .holdReady jQuery命令。 那么，如何在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

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

你的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']);

未经测试，但这个概念应该有效。

Answer 3

“.load（）仅在IE中触发，而不是在Firefox中触发。需要跨浏览器解决方案.BTW，.ready（）在样式表加载完成之前触发。”

这很奇怪，.load（）在firefox中适用于我。

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

虽然肯定不是一个理想的解决方案，但为什么不要求将某个字符串写入css文件的注释中，然后你可以将其用于regex？

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

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

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