Sven Burkert: DIV scrollen - Performance

Beitrag lesen

Hallo,

ich habe in einem DIV (style=position:relative;width:100px;overflow:hidden) ein Bild (style=position:absolute;top:0;left:0). Diese Bild kann ich über zwei Pfeile nach links und rechts scrollen. Dabei ist die Animation (vor allem im Firefox) sehr ruckelig (im IE nicht!). Die CPU Last geht auf bis zu 100% hoch (meine CPU hat 2,8 GHz). Wenn ich im IE scrolle, zuckt die CPU-Auslastungskurve nicht einmal.

Die Funktion zum Scrollen rufe ich periodisch auf:

t = setInterval("scrollRight()", 10);

In der Funktion selbst setze ich die Style-Anweisung "left" auf einen anderen Wert (ich nutze die JavaScript-Bibliothek jQuery):

function scrollRight() {
 // aktuellen Wert ermitteln:
 left = parseInt(globalVarScrollerImages.css("left"));
 // Wert erhöhen, nur scrollen, wenn Bild nicht schon ganz links positioniert ist
 if (left + 4 < 0) {
  left += 4;
 } else {
  left = 0;
 }
 // Wert setzen
 globalVarScrollerImages.css("left", left);
}

Ist mein Ansatz falsch, ca. 100 mal pro Sekunde den left-Wert neu zu setzen? Wenn ich den Wert nur 10mal oder 20mal pro Sekunde ändere, stockt und ruckelt es im FF trotzdem. Gibt es hier eine andere Lösung? Ich habe mir die Animations-Funktion in jQuery angeschaut (custom: function(from, to, unit)), aber da blickt ich nicht durch.
Hat jemand Tipps, wieso der Firefox hier solche Probleme hat?