问题
I call hide() function when document ready on 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 the <div> appears during a fraction of a second then disappears according to the hide() function.
My question: is there a way to avoid this <div> twinkling ?
Thanks
回答1:
It's the time between rendering the element and executing your JS code. The way to avoid this is not putting the code in the DOM-ready event but right after the element:
<div id="whatever">...</div>
<script>$('#whatever').hide();</div>
Anything else such a registering event handlers can still go into your DOM-ready function of course.
Oh, and you don't need to use visibility at all - show() and hide() will only use the display property anyway.
In case the element you want to hide is a "please enable JavaScript" warning, consider using <noscript>...</noscript> - then it will never show up unless JS is disabled.
回答2:
Yes, default visibility:hidden, and show() the ones you want. Alternatively, call hide() immediately after loading the html with $('...').hide() right after the relevant html.
The'twinkling' happens because the block is loaded as soon as the html hits the browser, but the jquery to hide it isn't executed until after all the html is loaded by the browser and the DOM is ready.
来源：https://stackoverflow.com/questions/8688363/twinkling-when-call-hide-on-document-ready