Flicker when calling hide () while preparing a document

Question

I call the hide () function when the document is ready for a specific <div> that has display:block and visibility:visible by default (we show it by default and we try to hide it with jQuery).

Sometimes, when I refresh the page, a <div> appears for a split second, and then disappears according to the hide() function.

My question is: is there a way to avoid this <div> flicker?

thanks

Answer 1

This is the time between rendering an element and executing your JS code. A way to avoid this does not put the code in the DOM-ready event, but right after the element:

 <div id="whatever">...</div> <script>$('#whatever').hide();</div> 

Anything else, such registration event handlers can, of course, still work in your DOM-ready function.

Oh, and you don’t have to use visibility - show() and hide() will use the display property anyway.

---

If the item you want to hide is a "enable JavaScript" warning, consider using <noscript>...</noscript> - then it will never appear if JS is not disabled.

Answer 2

Yes, default visibility: hidden and show () are the ones you want. Alternatively, call hide () immediately after loading the html with $ ('...'). Hide () immediately after the corresponding html.

The'twinkling happens because the block is loaded as soon as the html hits the browser, but jquery to hide it is not executed until all the html is loaded by the browser and the DOM is ready.