jquery animation is choppy in internet explorer when a large background image is used

Question

Hi,

I am using a dynamically expanding background image (similar to the new google home page background image feature). I have an jquery lavalamp animated menu that sits on top of the large background image.

The jquery animation is nice and smooth in all browsers, except for (you guessed it) IE. In IE8, it is choppy.

I've ruled out the javascript that resizes the background, because I can disable all javascript on the page (except for the animation), and manually add a large width and height attribute to the image, and I get the same effect.

Any ideas on how to fix this?

Answer 1

I would recommend disabling the animation in IE. With most jQuery animations, I think all you need to do is set the duration to 0, or at least reduce the duration.

You may be able to make other optimizations to make the page render more quickly in IE (such as adjusting the CSS). There are a hundred different obscure, black-magic code tricks you can do to try to make javascript go faster. You can also use a script benchmarking tool, like Y!Slow. A couple of links that might help you:

Y!Slow script performance guidelines:

http://developer.yahoo.com/yslow/help/#guidelines

IEBlog: javascript performance recommendations:

http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx

Google Page Speed tool, and best practices:

http://code.google.com/speed/page-speed/download.html