JavaScript Funktionsaufruf-Verzögerung? (iPad, webkitTransform)

[QXARE]

Hi,

ich bin gerade dabei, eine Art Slideshow für iPad zu erstellen.

Bei wenigen Bildern funktioniert diese normal, doch bei mehreren (so 10+) dauert es ca. 2 Sekunden, bis die Funktion (aus einem vorher erstellten JavaScript Objekt) ausgeführt wird, die den Animationscode beinhaltet. Die Animation selbst funktioniert ohne Probleme.

Nun habe ich zuerst gerätselt, was am Animationscode nicht passt und habe nichts gefunden.

Darauf hin habe ich versucht, einen normalen Link mit einem onclick-Event zu versehen, der quasi auch eine Animation ausführt - und siehe da, es gibt hierbei keine Verzögerung.

Weiß jemand, was das für ein Problem ist?, ich bin leider mittlerweile ratlos.

 

[Enigma]

Einen Debugger wie FireBug verwenden und schauen was im Hintergrund passiert.

 

[mercsen]

kann es vlt. sein das die bilder noch nicht geladen sind und erst zwischengespeichert werden müssen?
Ansonsten kann man ohne Code nicht viel sagen. Ist das ein IPad spezifisches problem oder taucht der fehler auch auf anderen Plattformen auf? Sind es stets die selben bilder, ist das verhalten also repdouzierbar oder scheinbar willkürlich?

Ansonsten hilft nur brachiales debuggen! Da es auf dem ipad wohl kein firebug (oder aber den wie ich finde bessere chrome debugger) nicht gibt wäre es hilfreich dir ausgeben zu lassen wann z.b. die animationsfunktion aufgerufen wird. ENtweder mit einer Ausgabe in einem debug fenster oder simple mit alert(kann aber die animationen stören) und wenn da dann schon nicht sofort angezeigt wird das die animation startet hättest schonmal einen anhaltspunkt.
Und dann muss man sich eben schritt für schritt durch die funktion hangeln.
Am einfachsten wäre es wenn du dir eine funktion schreibst wie

function debugOutput(str) {
    document.getElementById("debugausgabe").innerHTML(this.innerHTML + str);

oder so etwas in der art. Und dann nach jedem Kritischen aufruf in der animation debugutput aufrufen und dir anzeigen lassen was er gerade wie gemacht hat. Evtl. auch pausieren bis von dir das ok für weitere ausführung kommt o.ä.

 

[QXARE]

Ohne Code ist blöd ich weiß, möchte ihn aber noch ungern zeigen.

Auf jeden Fall habe ich bereits die Position gefunden, an der der Delay auftritt - das ist genau der Funktionsaufruf (direkt nach dem Aufruf ist ein console.log).

Da kann man dann nicht mehr wirklich viel debuggen^^. Wie geschrieben habe ich noch einen Link der Javascript Code bei Klick inline ausführt. Diese Aktion wird sofort ausgeführt.

Kann es irgendwie sein, dass das Objekt für kurze Zeit quasi "gesperrt" ist bzw. den Funktionsaufruf reiht?

Bilder sind es insgesamt 6 verschiedene auf ca. 40 Items verteilt, die allesamt sofort geladen werden.

Im Chrome zum Beispiel gibt es keine Verzögerung.

 

[mercsen]

je nachdem wie du deine slideshow implementiert hast können auch andere fehler auftreten.

Debuggen kann man da aber erst recht viel, nämlich in dem man sich Schrittweise durch den Code hangelt, ich kann hier nur noch einmal den Chrome Debugger empfehlen.

Nutzt du für die animationen ein Framework wie jQuery?
Wenn ja, wie werden die Animationen gesteuert? Kann es sein das ein element welches für die neue Animation verwendte wird vorher noch nicht zu ende animiert war? Und die neue erst startet bis die alte durch ist? Hatte ich mal als blöden fehler drinne gehabt bei einem ähnlichem Projekt.

 

[QXARE]

Ich verwende jQuery, aber verwende die Funktionen nicht zum Animieren sondern animiere direkt per style Attribut.

Aber ich werde nochmals mit einem Debugger drüber sehen.

 

[Backslash]

Wenn du schon jQuery verwendest, dann nutze doch gleich .animate() da kannst du dir recht sicher sein, dass es funktioniert.

 

[QXARE]

Ohne jQuery ist es teilweise um einiges performanter.

Es geht hier aber nicht um die Animation an sich, da es ja schon so lange dauert, bis diese überhaupt ausgeführt wird - die Zeit dazwischen (Klick - Funktionsaufruf) ist das seltsame dran.

 

[mercsen]

Ja, jQuery animiert auch über das style attribute .....
JavaScript animationen sind i.d.r. langsamer als z.B. CSS3! Nur leider ist CSS3 derzeit, obwohl es super sein soll, noch sehr schlecht verbreitet und die performance teilweise nen witz.
Was ist denn nun bei Rumgekommen? Problem gelöst? Wenn ein wenig mehr Code zeigen würdest wäre das sicher schon pasé, hier wird dir schon keiner was weggucken

 

[ice-breaker]

Nur leider ist [bei] CSS3 derzeit [...] die performance teilweise nen witz.

Hast du da irgendwelche Belege dafür?

 

[Daaron]

Nur leider ist CSS3 derzeit, obwohl es super sein soll, noch sehr schlecht verbreitet und die performance teilweise nen witz.

Im Vergleich zu was?
Denkst du wirklich, so eine kleine :hover - Einblende-Animation spielt ernsthaft irgendwo eine Rolle. Das Schöne an CSS3-Animationen ist, dass du nur in einer Handvoll Zeilen Dauer sowie Start- und Endwerte definierst. Da kannst du aber drauf wetten, dass moderne Browser DIESE Werte deutlich schneller parsen als sie es mit JS könnten.

Für nichtkritische Animationen (z.B. ein/ausblenden von Rahmen von Inputs bei :focus) nehm ich nur noch CSS3. Wer mit IE surft kriegt halt eine sofortige Farbänderung ohne coolen Fade...

 

[mercsen]

Hast du da irgendwelche Belege dafür?

ich werde mal suchen, es gibt für jQuery ein plugin das alle Animationen in CSS3 transitions umwandelt und die liefen auf meinem rechner (Core i5 2x2,53 GHz) sehr ruckelig wo die normalen jQuery animationen super rund liefen.
Browser war damals glaube ich chrome 13, wie es heute aussieht weiß ich nicht.

das sollte auch keine Kritik an CSS3 sein, sondern ich denke mal die umsetzung ist dort einfach noch nicht so weit fortgeschritten, am ende wird das sicherlich schneller sein als mit JS

zum IE

http://code.google.com/p/ie7-js/

die JS files updaten alte IE's zu version 9!