Avoiding Flickering in jQuery
Ok, so you have an expandable list that works nice in jQuery, but as you add more code and graphics to your HTML document, chances are that the onDomReady()
becomes too slow and you’ll see a familiar flicker before the jQuery kicks in. In your case, the entire list will be shown for a millisecond before the DOM is fully loaded and the list contracts. One way of avoiding this is dirty but surprisingly easy:
document.write('<style type="text/css">body{display:none}</style>');
jQuery(function($) {
$('body').css('display','block');
});
The document.write
looks ugly, but it actually works really well in this case. First hide the body via a direct style injection through JavaScript, and then show it onDomReady. Flicker-free!