/    Sign up×
Community /Pin to ProfileBookmark

Sluggish JS animation in FF, IE7

Copy linkTweet thisAlerts:
Apr 02.2008

Hola,

I’ve made a very simple test site recently, where animation is done with javascript (seTimeout). It also contains a small flash object.

The problem is, that the animation looks awfully sluggish with FF2,3, IE7.
Strangely, it has normal speed in IE6. The problem is caused by the flash element (if removed, everything works normal) but why? Is this a browser rendering issue, or there is a better way to do JS animation?

the site:
[url]http://poisonborz.hu/pbtest/[/url]
(click on Link 1, 2 on the top area)

js file:
[url]http://poisonborz.hu/pbtest/scroller.js[/url]

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienApr 02.2008 — Using setTimeout or setInterval is normal for animation in JavaScript. If the Flash object is animating things, the processing requirements to redraw the web page and the Flash object might be astronomical. The performance will depend on how efficiently Flash does animation, how efficiently any given browser is able to execute the setTimeout function, JavaScript and redraw the page, and how powerful the computer's video card is. Most likely to get smooth JavaScript animation, you'll need to stop the Flash animation before doing the JavaScript animation. Another possibility is hiding the Flash object from view when doing the JavaScript animation, as this would greatly reduce the stress of redrawing the screen.
×

Success!

Help @poisonborz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...