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; }