Avoiding Flickering in jQuery
22 comments so far | Add yours
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!
22 Responses so far. Add yours.
-
At 11:58 pm on April 13th, 2008 , Rasmus wrote:
Wow, great tip David! I wish I’d know about that a long time ago.
-
At 10:08 am on April 16th, 2008 , Ryan Roberts wrote:
Hi David, it may be worth noting this does not work with IE5.5 or below. Even though the browser is now quite old, people should still be able to view a site. However by setting display:none with a style injection then changing it with jQuery users of IE5.5 or below get nothing, nothing at all. This is obviously due to jQuery’s lack of IE5 support, and it means there’s no graceful degradation.
Something to consider before using this solution I think.
-
At 10:14 am on April 16th, 2008 , Ryan Roberts wrote:
Ah, here’s a solution.
Create a new css document for IE5 and place it in a conditional comment after the javascript in the head. In the IE5 css file set the body to block.
However I seem to remember IE6 having problems with JS coming before the conditional comments, I’ll keep an eye out for any issues.
-
At 8:59 pm on April 29th, 2008 , Jay N. wrote:
I wonder what affect this will have on Googlebot visiting the site - will it interpret the body{display:none} as it being a blank page?
-
At 9:37 am on May 6th, 2008 , konteyner wrote:
yess nice explorer ie6.0
-
At 3:44 pm on May 16th, 2008 , john wrote:
yes, but..
http://www.w3schools.com/browsers/browsers_stats.asp
http://www.upsdell.com/BrowserNews/stat.htm
http://marketshare.hitslink.com/report.aspx?qprid=3IE 5 has a 1.0% market share.
So… what you could do is not use jQuery, but instead use plain old javascript to manipulate the dom… in this case.
-
At 10:37 pm on October 1st, 2008 , gömlekçi wrote:
Something to consider before using this solution I think.
-
At 10:38 pm on October 1st, 2008 , oryantal kostüm wrote:
Wow, great tip David! I wish I’d know about that a long time ago.
-
At 9:04 pm on October 12th, 2008 , Björn wrote:
It’s an interesting idea, but wouldn’t it be safer to, instead of setting the body element to
display:none, adding a class name to the body when JavaScript is enabled in the browser?something like:
document.body.className += " hasJS";…and then using that in the stylesheet?
.hasJS ul.nav ul {display:none}-
At 5:49 pm on October 25th, 2008 , toplist wrote:
thanks four you flowers
-
At 5:27 pm on October 26th, 2008 , gömlek wrote:
Gömlek
-
At 4:49 pm on October 28th, 2008 , sohbet wrote:
I need an Ewok suit now.
-
At 4:50 pm on October 28th, 2008 , gomlek wrote:
merci
-
At 11:55 am on November 4th, 2008 , v pills wrote:
you flowers
-
At 6:12 am on November 18th, 2008 , 大妗姐 wrote:
hey,I like your article~
-
At 1:44 am on February 18th, 2009 , net haber wrote:
thanks four you flowers
-
At 3:15 pm on March 19th, 2009 , Estetik Cerrahi wrote:
Woww realy great themes. I translate to Turkish lang and use this Tube theme my rulman fiyatları bayileri modelleri web pages.
-
At 12:56 pm on April 1st, 2009 , Bedava okey wrote:
descrizione super congratulazioni. Spero di ottenere migliori successo. Congratulazioni
-
At 5:20 pm on April 9th, 2009 , Anonymous wrote:
-
At 7:08 pm on May 11th, 2009 , guzelokey wrote:
thank
-
At 4:08 am on June 12th, 2009 , okey oyna wrote:
This was an issue with the java applet, not just the page even applet was flickering thanks for information
Okey
1 Trackbacks & Pings:
-
Trackback at 5:03 am on July 11th, 2008 by c graphics flickering:
[…] […]