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

To expand on my comment above if anyone else needs an answer for this:

Your Javascript would look like this:

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

And the fetchstyle.php script would look like this:

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

Untested, but the concept should work.

".load() only fires in IE, not in Firefox. A cross browser solution is required. BTW, .ready() fires off before the stylesheet has finished loading."

This is very strange, .load() works for me in firefox.

"Can't query for some CSS property to change via setTimeout. The user may point to any custom stylesheet, and there is no way to know what her CSS file will contain."

Although certainly not an ideal solution, why not require a certain string to be written into the comments of the css file which you could then regex for?

Other idea: Have you considered using propertychange event?

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

This way you could hide the page elements that may change, allow the browser to process the css then show those elements (you could even fade out and in) when the processing is completed. You can do that by having a short timeout which is cancelled if the event handler (saying css property has changed) is called again before the timeout has showed your page.

I've recently ran into the same problem. My solution is to hold the ready event and release it after the css page loads. I used the $.holdReady jQuery command outside the document.ready code. So, how can you fire an event on css load? I used the onload command on the link tag. Code:

$.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. Haven't checked in different versions or browsers. Also, i think that the onload event on the link tag is purely HTML5.