Can a jQuery download event catch fire when adding a dynamic stylesheet in Firefox?

Question

I am running the following code in jQuery to dynamically load a stylesheet. Its purpose is to allow users to load a custom stylesheet and change the appearance of the JavaScript widget:

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

For a second of a second, the screen looks unstable, because the correct style is applied to the widget only after loading the dynamic style sheet. To solve this problem, I need to know when the dynamic styles actually finished loading.

Although this question has been discussed before , none of the solutions apply in my case:

• .load () runs only in IE, not Firefox. A cross browser solution is required. BTW, .ready () fires before the stylesheet finishes loading.
• .get () works in only one domain. The style sheet in my case can come from any given domain.
• Cannot execute a request to change a CSS property using setTimeout. A user can point to any custom stylesheet, and there is no way to find out what her CSS file will contain.
• Waiting for constant time after loading styles through setTimeout is obviously a bad solution. It is impossible to know in advance how long it will take to load a stylesheet, if at all.

Any new ideas on this issue? Your help is greatly appreciated.

Answer 1

Expand my comment above if someone else needs an answer for this:

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 script :

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

, .

Answer 2

"load() IE, Firefox. - . BTW,.ready() , ."

,.load() firefox.

" - CSS setTimeout. , , CSS.

, , , , css, ?

: , changechange?

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

, , , css, ( ), . , , ( css) , .

Answer 3

. , 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
})

It works in FF 16. Not tested in different versions or browsers. Also, I think the onload event in the link tag is purely HTML5.