A cross browser helper meant as a notifier for when external stylesheets (LINK elements) are fully loaded.
This is still experimental, some feedback is needed to confirm it really works as expected in different environments.
/*
* Copyright (C) 2010 Diego Perini
* All rights reserved.
*
* cssready.js - CSS loaded/ready state notification
*
* Author: Diego Perini <diego.perini at gmail com>
* Version: 0.1
* Created: 20100616
* Release: 20101104
*
* License:
* http://javascript.nwbox.com/cssready/MIT-LICENSE
* Download:
* http://javascript.nwbox.com/cssready/cssready.js
*/
function cssReady(fn, link) {
var d = document,
t = d.createStyleSheet,
r = t ? 'rules' : 'cssRules',
s = t ? 'styleSheet' : 'sheet',
l = d.getElementsByTagName('link');
// passed link or last link node
link || (link = l[l.length - 1]);
function check() {
try {
return link && link[s] && link[s][r] && link[s][r][0];
} catch(e) {
return false;
}
}
(function poll() {
check() && setTimeout(fn, 0) || setTimeout(poll, 100);
})();
}
<?
header("Content-type: text/css");
?>
body { background-color: orange; }
<?
flush();
usleep(1000000);
flush();
?>
body { background-color: yellow; }
<?
flush();
usleep(1000000);
flush();
?>
body { background-color: green !important; }