jQuery Animationen sind abgehackt und stottern in Firefox

Question

Ich mag es zu denken, ich bin kein Dummy, aber ich kann nicht meine horizontale jQuery Slideshow reibungslos animieren besonders in FireFox (auf einem Mac). Hat jemand einen Rat?

Animation, wird wie so getan:

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)}); 

Beispiel Link:

http://mayfourteenth.com/w/lookbook?preview=1

Answer 1

Die Animation für mich in Chrome glatt aussieht. Jedoch glaube ich, dass es mehrere Dinge gibt, die Sie tun können, um die Glätte zu verbessern:

Zuerst ist es in Ordnung, alle Bilder im Voraus zu laden, wie Sie here (an der Spitze) tun. Doch sie alle auf einmal, wie in den "Example link" Anzeige Leistung verletzt, als sie auf einmal animieren:

<div id="lookbook"> 
    <div><img src="/q_images/lib/lookbook/1.jpg"></div> 
    <div><img src="/q_images/lib/lookbook/2.jpg"></div> 
    ... 
    <div><img src="/q_images/lib/lookbook/15.jpg"></div> 
</div> 

Statt dies zu tun, können Sie einfach das nächste und vorheriges Bild Cue up auf beiden Seiten das aktuelle Bild, aber dann nicht den Rest der Bilder auf der Seite, bis sie benötigt werden. (Sie ist nach wie vor im Voraus laden jedoch in Ordnung.)

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

1. Verwendung kleiner (von Pixeln und/oder Dateigröße) Bilder.
2. Machen Sie kleinere Code-Optimierungen, indem Sie Dinge im Voraus berechnen.
3. Verwenden Sie eine eigenständige Animationsbibliothek anstelle von jQuery.

Answer 2

Ich habe in Firefox, Chrome (Dev) und Safari auf Windows getestet und die Animation stottert in allen Browsern (aber 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 durchaus die Leistung ein wenig erhöhen, dies zu tun:

var lookbook = $('#lookbook'); 
var look_caption = $('#look_caption'); 
if (lookbook.length) {  
    lookbook.width(lookbook).width()*$('#lookbook img').length) 
    if (look_caption) { 
     look_caption.html(lookcaps[0]); 
     look_caption.fadeIn(); 
    } 

Statt:

if ($('#lookbook').length) {  
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length) 
    if ($('#look_caption')) { 
     $('#look_caption').html(lookcaps[0]); 
     $('#look_caption').fadeIn(); 
    } 

auch URIs für die Bilder unter Verwendung von Daten Ich würde empfehlen, da es die Menge von httpRequests Sie reduziert muss gemacht werden, um die Seite geladen zu bekommen.

Answer 3

Sie können auch diese

.animate({left:'-=825'}); //next 
//and 
.animate({left:'+=825'}); //previous 

Statt

von

.animate({left: -((lookbook-1)*825)+'px'});