More Javascript fun - animation slowdown
Again with the charity page and the animation. Happy in Firefox, happy in IE6 and 7, but Opera runs it like a dog with no legs.
Perhaps it's the fact I have three setIntervals running; well I concatenate two together and then edit them out and nope it's definitely the animation.
To recap the animation simply takes a div via its id and moves it every 10 milliseconds to the left when it leaves the screen the name inside is changed and it's shoved to the end of the queue. This has the benefit of not having to create enough containers for each name, just requires enough to fill the screen plus one extra for overlapping.
So why is Opera running at 100% CPU for this animation and running it so slowly compared to the other browsers?
I try changing the setInterval timing with no effect; I cut the number of div containers on the screen with no effect; I take a look around the net and spot some talk in various places about positioning. Let's try that.
So I switch out the divs for spans set position to absolute rather than relative and whoosh Opera is moving them along quite nicely it's still a 50-80% CPU strain, but that's better than a constant 100%. It's also had the benefit of halving the usage for the other browsers too
I can only surmise that with every movement the browser has to recalculate the position of every element and that Opera is particular inefficient at doing so. I'm therefore guessing it was the position absolute that changed things as it took those containers out of the flow, however changing div to span, and setting good old inline-block also meant I could ditch some extra positional styling too; so yay!
Hmm odd it still seems to be running at 100% in Opera after I've posted it, but it's still running faster and not interfering so much with the other programs so I'll still give it a pass.
2 comments:
It seems that I've stumbled on the same problem.
I narrowed it down to the case when loading (content image loading) slows that the whole animation.
Check if there are images loading while you're animating in Opera.
I'm resizing/animating the layout container div's height so it can fit the new image content. By doing so the window height is resized as well and this animation is painfully ugly or skips whole parts.
This animation is fired immediately after I find the image dimensions. (I use interval to check this).
So animation starts before the image is loaded and it barely drags the container. If you fired it after loading process - voilà, smooth!
Hmm interesting. I'm not animating images just divs containing text and the divs are of a fixed height/width contained within a fixed height/width div. There is an image positioned behind it, but that too is unchanging.
Are the images you are animating of different sizes? If they are then you are, in essence, doing the same thing as I was in forcing Opera to reconsider the layout at each movement.
If so can you determine the maximum height, set that for the container, and absolute position the animations within it; that too might prevent redrawing the whole page.
Post a Comment