During the process of rendering a web page, there is a delay between the time at which a stylesheet is loaded and the time at which all the rules in that stylesheet are applied and the painting is completed.
This delay is dependent on the size of the stylesheet, and the complexity of the rules.
Is there a reliable way to check when the painting process has been completed?
Note: I'm looking for a way that will also work when CSS rules are applied dynamically, i.e. when new stylesheets are added to the page or when styles are modified by JavaScript. So document.onload is not an option here.
Context: I'm working on a large-scale single-page app, which loads stylesheets on the fly. To avoid a flash of unstyled content, I'm showing a spinner, and I need to know exactly when to hide it.
I'd say the most reliable solution would be to add a small delay after the css loaded event.
Something like this pseudo-code:
myCssTag.onload(function(){
setTimeout(doStuffAfterRender, 100);
});