Grosse Mengen an gleichzeitigen "einfachen" Animationen

[Hattrijck]

Hallo zusammen,

Ich würde gerne rund 400 Objekte (divs/imgs) gleichzeitig von A nach B (keine Höhenverschiebung wobei A und B bei jedem div anders ist) bewegen lassen. Momentan habe ich dies mit jQuery (.animate) gelöst, doch ich habe bei rund 200 Objekten je nach Rechner 10-30% CPU-Auslastung. Dazu müsste noch gesagt werden dass ich bei den Bildern alle 500ms die src ändern lasse, was jedoch nicht so viel Rechenleistung benötigen müsste?

Meine Frage wäre nun, mit was kann ich mein Vorhaben mehr oder weniger Ressourcen schonend umsetzen?

MFG
Hattrijck

 

[ComFreek]

Hi,

zwei Vorschläge, die mir spontan eingefallen sind:

1.) Bilder vorladen. Sprich erstelle Image-Objekte und weise denen die Bilder zu, sodass diese gecacht werden.
Außerdem Cache-Einstellungen für Bilder seitens des Servers vornehmen.


2.) Nutze kein jQuery! jQuery ist nicht für hochperformanztechnische Angelegenheiten konzipiert. Reines JavaScript ist immer schneller als jegliche Bibliothek!

Übrigens gibt es seit ein paar Wochen ein neues Projekt, welches sich genau mit der schnellen Animation von DOM-Objekten beschäftigt.
Momentan aber noch closed-beta!
http://famo.us/

 

[holzmensch]

Sind die Bilder gecached? Sonst müsste man ja bis zu 800 mal / Sekunde irgendwelche neuen Bilder laden. Ist die Bewegung animiert? Ist sie immer unterschiedlich? Oder bewegen sich einfach diese 400 Objekte von x nach y ohne irgendwelche Effekte?

 

[Hattrijck]

Die Bilder sind gecached. Es sind Figuren in 2 Positionen (laufen/stehen) die einfach geswitched werden. Es liegt definitiv net an den Bildern sondern nur am jQuery...

Die Objekte sollen einfach mit einer bestimmten linearen Geschwindigkeit von x nach y bewegen. Die jQuery animate "wechselnde" Geschwindigkeit ist dabei nur ein netter Nebeneffekt.

EDIT: Wäre es besser wenn ich jeweils margin-left/right verändern würde? Sprich wäre dies Resourcenschonender?

 

[holzmensch]

jQuery macht ja nichts anderes nur dass es noch andere Sachen macht. Hast du es mal mit der canvas probiert, dass du die Bilder renderst und dann anzeigst - Stichwort jThree oä?