CODEWITHSUNDEEP
jqueryperformancecssscrolljquery-animate
fxck
fxck

Reputation: 4908

jQuery animations speed(smoothness) in firefox 4

Hey, I've made this site(please be patient, there's no preload yet, so it might take a while to load) where you browse images(that are fullscreen) by clicking right/left, it's all done with hidden overflow and jquery's animate + scrollLeft, now there are two major problems,

  1. generall speed and smoothness of that scroll left(this should be fast, as it's no position absolute + left) in pretty much all browsers, firefox(4) especially
  2. the second would be generall speed of jquery's animations only in firefox, when you click on "menu", that accordion inside is just ridiculously slow.

now my designer has clearly insipired himself with http://svenprim.com/ the way the guy coded it is quite similar to mine, yet his site is very smooth and fast, and I can't think of any reason why is it.

Any help/tips appreciated, I'm getting desperate.

Upvotes: 4

Views: 1165

Answers (3)

fxck
fxck

Reputation: 4908

For anyone wondering, the problem had nothing to do with the javascript itself, the problem was .photoBox having a gif animation as a background. Apparently firefox doesn't like gifs while scrolling.

You can check that it's fairly fast and smooth now.

http://jankaslphoto.com/

Just gotta work on that preload(and on webkits somehow counting width wrong). Either way, thanks for your help, you both, I'll definitely take a look at that packing.

Upvotes: 1

James Westgate
James Westgate

Reputation: 11454

I see you are using some custom easing functions. These calculate values on each animation step nd so can have a great impact on performance. Try removing the easing functions (or use 'swing' - the default) and see if this improves your performance.

I also see you are using a packed version of the easing functions js file - this is considered bad practise these days as the browser has to unpack the file everytime - even when loading from cache - this also eats into CPU cycles - for more info see John Resig here -> http://ejohn.org/blog/library-loading-speed/ - A better approach would be to minify the javascript using eg Google Closure compiler - I usually just use the easing function I require and place it in my main js file (licence permitting).

Although CSS3 transforms are nice, they are not supported in all browser and unfortunately jQuery doesn't take advantage of them (yet).

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 73035

I would use CSS transitions and transforms to animate them where possible.

Have a look at http://css3.bradshawenterprises.com/sliding/ for a few demos. Using transforms means it will be hardware accelerated on iOS, and doesn't require a repaint, so things are generally quicker.

I've written a quick function to use jQuery animate as a fallback, and to use transforms where possible, take a look at http://css3.bradshawenterprises.com/legacy/ to see how to use it.

It requires Modernizr to be loaded as well, though you could write your own tests for transitions and transforms if needed instead.

Upvotes: 0

Related Questions