Может ли событие загрузки jQuery запускаться при добавлении динамической таблицы стилей в Firefox?

Question

Я запускаю следующий код в jQuery для динамической загрузки таблицы стилей.Его цель - позволить пользователям загружать пользовательскую таблицу стилей и изменять внешний вид виджета JavaScript:

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

В течение доли секунды экран выглядит скачкообразным, поскольку правильный стиль применяется к виджету только послединамическая таблица стилей загружена.Чтобы решить эту проблему, мне нужно знать, когда фактически динамическая таблица стилей закончила загрузку.

Хотя эта проблема обсуждалась до , ни одно из решений не применимо в моем случае:

1. .load () запускается только в IE, а не в Firefox.Требуется кросс-браузерное решение.Кстати, .ready () отключается до завершения загрузки таблицы стилей.
2. .get () работает только в том же домене.В моем случае таблица стилей может происходить из любого данного домена.
3. Невозможно запросить изменение какого-либо свойства CSS через setTimeout.Пользователь может указать на любую пользовательскую таблицу стилей, и нет никакого способа узнать, что будет содержать его CSS-файл.
4. Ожидание постоянного времени после загрузки таблицы стилей с помощью setTimeout, очевидно, является плохим решением.Невозможно заранее узнать, сколько времени потребуется для загрузки таблицы стилей, если она вообще загрузится.

Есть какие-нибудь новые идеи по этому вопросу?Ваша помощь очень ценится.

Answer 1

". Load () запускается только в IE, а не в Firefox. Требуется кросс-браузерное решение. Кстати, .ready () запускается до завершения загрузки таблицы стилей."

Это очень странно, .load () работает для меня в Firefox.

"Не удается запросить изменение какого-либо свойства CSS через setTimeout. Пользователь может указать на любую пользовательскую таблицу стилей, и нет способа узнать, что будет содержать ее CSS-файл."

Хотя это, конечно, не идеальное решение, почему бы не потребовать, чтобы в комментарии к файлу CSS была записана определенная строка, для которой вы могли бы затем выполнить регулярное выражение?

Другая идея: Вы рассматривали возможность использования события changechange?

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

Таким образом, вы можете скрыть элементы страницы, которые могут измениться, позволить браузеру обработать CSS, а затем показать эти элементы (вы можете даже исчезнуть и войти), когда обработка будет завершена. Вы можете сделать это, имея короткий тайм-аут, который отменяется, если обработчик событий (скажем, свойство css изменилось) вызывается снова до того, как тайм-аут показал вашу страницу.

Answer 2

Я недавно столкнулся с той же проблемой. Мое решение состоит в том, чтобы сохранить событие ready и выпустить его после загрузки страницы 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 в теге link является чисто HTML5.

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

Не проверено, но концепция должна работать.