CODEWITHSUNDEEP
jquerycss
nerdess
nerdess

Reputation: 10930

jquery: does $(window).load() get fired after css is rendered?

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?

Upvotes: 4

Views: 2386

Answers (2)

Eric Hannum
Eric Hannum

Reputation: 392

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.

Upvotes: 1

parjun
parjun

Reputation: 130

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.

Upvotes: 3

Related Questions