jQuery-Animationen sind in Firefox abgehackt und stottern

Ich habe in Firefox, Chrome (Dev) und Safari unter Windows getestet und die Animation stottert in allen Browsern (allerdings mehr in FF).

Um die JavaScript-Leistung zu erhöhen, können Sie alle getElementById oder $ ("div # mydividentyfier") Aufrufe loswerden. Wenn Sie sie stattdessen in Variablen speichern, werden sie zwischengespeichert. Beispiel: Es könnte die Leistung ein wenig erhöhen, um dies zu tun:

Anstelle von:

Ich würde auch empfehlen, Daten-URIs für die Bilder zu verwenden, da es die Anzahl der httpRequests reduziert, die Sie machen müssen, um die Seite zu laden.

Die Animation sieht in Chrome glatt aus. Ich glaube jedoch, dass es mehrere Dinge gibt, die Sie tun können, um die Sanftheit zu verbessern:

Zunächst ist es in Ordnung, alle Bilder im Voraus zu laden, wie Sie hier (oben) tun. Das gleichzeitige Anzeigen aller Elemente auf einmal, wie im "Beispiellink" , beeinträchtigt die Leistung, da sie alle animieren sofort:

Statt dies zu tun, können Sie einfach das nächste und vorherige Bild auf jeder Seite des aktuellen Bildes aufrufen, aber dann haben Sie nicht den Rest der Bilder auf der Seite, bis sie benötigt werden. (Das Vorladen ist jedoch immer noch in Ordnung.)

Andere Dinge, die die Leistung leicht verbessern können, sind die folgenden:

1. Verwenden Sie kleinere (nach Pixel und / oder Dateigröße) Bilder.
2. Machen Sie kleinere Codeoptimierungen, indem Sie Dinge im Voraus berechnen.
3. Verwenden Sie eine eigenständige Animationsbibliothek anstelle von jQuery.

Vielleicht möchten Sie auch dies verwenden

Anstelle von