4

I was reading this stackoverflow post:

Is $(document).ready() also CSS ready?

The answer is clear: no, $(document).ready() does not guarantee complete CSS rendering.

That left me wondering: What can I do to ensure full CSS rendering before some jQuery function (that relies on a fully rendered CSS) is executed? Is there an event that gets fired once the CSS is rendered? Is $(window).load() the solution? $(window).load() seems to work fine for me and also seems to be what this developer recommends:

http://taitems.tumblr.com/post/780814952/document-ready-before-css-ready (is our assumption)

Correct?

Community
  • 1
  • 1
nerdess
  • 10,051
  • 10
  • 45
  • 55

2 Answers2

3

I'd suggest load the CSS in the head before you call the scripts which should ideally be at the bottom of the HTML document. I have been using this and never has there been a case where unstyled content is visible.

parjun
  • 130
  • 1
  • 10
  • sounds like a smart thing to do......though assume that i am not able to edit the html therefore i am not able to move the js to the bottom and therefore i have to live with a header where comes _before_ any declaration :( – nerdess Jul 31 '13 at 15:10
  • You will have to use window.onload in case you cannot edit HTML. But I'd suggest you take a look as to why you are not able to edit HTML. This is the right way of doing this. – parjun Aug 01 '13 at 07:36
  • i am not able to edit the HTML because business does not allow it (each change in the HTML is very expensive for them)......don't ask ;) – nerdess Aug 02 '13 at 10:04
1

Just loading the CSS in the head before the scripts will cause it to load but not render before the scripts are run. This is a problem, for example, for checking the positions of elements on load which, if fired after the CSS is loaded but before it's rendered, will give the wrong answer.

If you have code that is really reliant on your CSS, using $(window).load(function () {...}) can save you a lot of race condition headache.

Eric Hannum
  • 382
  • 2
  • 6
  • 16