Question

I want to generate html layout with areas (divs, spans) that can be shown/hidden conditionally. These areas are hidden by default.

If I call .hide() method with jquery on document.ready these areas may blink (browsers render partially loaded documents). So I apply “display: none” style in html layout.

I wonder what is the best practice to avoid blinking, because applying “display:none” breaks incapsulation rule – I know what jquery does with hide/show and use it. If jquery’s hiding/showing implementation will change one day, I’ll get the whole site unworkable.

Thank you in advance

Answer 1

There’s absolutely nothing wrong with setting an intial display property of an element, especially if you encapsulate it in a css class.