1

thanks in advance if you're willing to beam me up with a solution. I'm working on a site http://tecnointelcom.com/new/ -- and there is a carousel in the homepage. I'm using a jQuery Plugin "Billy the Carousel", from time to time it gets nuts and jumps from slide to another in less than 1 second (periodically, so about 5 slides in 3 seconds), but the indicator is still in the anchor of the a slide (it does not go nuts like the slider).

the jquery plugin is in (same route as prev link)/js/billy.carousel.jquery.js

the init file is in (same route as prev link)/js/init.js

Pls... could anyone see this and reply with something I must be missing in the code?

Thx, Alex

Alex
  • 11
  • 1

1 Answers1

1

It looks like the plugin is queuing functions that contain animations with setInterval(). The latest modern browsers have begun to implement feature called requestAnimationFrame() to save resources. Essentially, your animation calls are being stacked up while your tab with the carousel in it is out of focus or hidden. When the tab regains focus, jQuery executes them all at the same time. jQuery advises you not to do this. From their .animate() documentation:

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

You could also clear the object's fx queue with .clearQueue() right before the animation starts. At line 160 of billy.carousel.jquery.js:

object.clearQueue().animate({'marginLeft': "0"}, option.scrollSpeed);
C. Spencer Beggs
  • 519
  • 5
  • 9