Avoiding Flickering in jQuery

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:

  1. document.write('<style type="text/css">body{display:none}</style>');
  2. jQuery(function($) {
  3. $('body').css('display','block');
  4. });

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!