Is there a way to know when external CSS inside has been applied, but not to wait for images to load

Question

$(document).ready() does not guarantee that

window.onload waits for all inline (I mean static) images

DOMContentLoaded does not wait for external CSS

Any other solution? Have I missed anything?

It should be cross browser (at least major browsers). And of course I'm not asking about dynamicaly loaded stylesheets.

The MDN gives a solution [here](https://developer.mozilla.org/en/docs/HTML/Element/link). — Denys Séguret, Apr 03 '13 at 19:15
My only doubt is about the existence of other solutions, as I know browsers block the rendering until head stylesheets are loaded. And I'm not 100% sure the load event may really occur before head stylesheets are loaded. — Denys Séguret, Apr 03 '13 at 19:21
@dystroy - sounds about right, but how would one test that? javascript is useless at such an early time in the rendering, and I'm not sure the console would be much help either ? — adeneo, Apr 03 '13 at 19:28
@adeneo This might be why this question still has no answer. But your `styleSheet.onload` solution could be one. :) — Denys Séguret, Apr 03 '13 at 19:31
@dystroy - not posting it ;) ,,, I have no idea if it works or not, but it's there in the comment for anyone who's willing to try it out ? — adeneo, Apr 03 '13 at 19:38
It should be cross browser. And dynamic stylesheets are not in the game — Dan, Apr 03 '13 at 20:10
@RickViscomi yes of course http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready — Dan, Apr 04 '13 at 08:34

score 2 · Accepted Answer · answered Apr 03 '13 at 20:39

In certain conditions, the DOMContentLoaded event might be the one you are looking for:

 window.addEventListener('DOMContentLoaded', func, false);

You will need to place the external stylesheet in the head and the external javascript in the footer, so this event will not be fired before the styles are applied, but right after.

See: http://molily.de/weblog/domcontentloaded and http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/ for reference.

Also, it will not work on IE<9 (of course).

Is there a way to know when external CSS inside has been applied, but not to wait for images to load

1 Answers1