1

I have made a little animation that resembles the coverflow itunes uses as a screensaver on mac. It fetches a list with filenames using ajax and starts looping over them to randomly fill divs with them.

Demo code: http://jsfiddle.net/FQmXK/4/

All of this works great but the problem starts when you minimize the browser or go to a different tab on google chrome. The animation seems to queue up a bunch of cycles and tries to execute them all when the window is opened up again. This is causing all sorts of problems, images being undefined, all kinds of flashing on the screen...

I was wondering if there is any established solution for this queueing behavior? Can I force it to execute all animation even if its not visible?

Thomas Van Nuffel
  • 199
  • 12
  • A [jsFiddle test case](http://jsfiddle.net/) reproducing the problem will probably help you to get an answer here. You can use [http://dummyimage.com/](http://dummyimage.com/) or [http://placekitten.com/](http://placekitten.com/) for the images. – thirtydot Jun 29 '11 at 09:28

2 Answers2

1

You can detect browser window focus : Is there a way to detect if a browser window is not currently active?

And set a variable. If the window is inactive, set a variable to false, and do not queue further animations until the window becomes active.

Community
  • 1
  • 1
DhruvPathak
  • 42,059
  • 16
  • 116
  • 175
1

This question discusses the same problem and provides a generalized solution:

How can I make setInterval also work when a tab is inactive in Chrome?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • This wouldn't work as random divs are selected and images are loaded in to them. "Putting them back" is not really an option. – Thomas Van Nuffel Jun 29 '11 at 09:21
  • I'm not familiar with this problem, beyond the fact that I remembered that question and thought it relevant. I can't fix your problem without spending too much time experimenting with it - sorry. – thirtydot Jun 29 '11 at 09:27