jQuery Animationen sind abgehackt und Ruckeln in Firefox

Ich mag zu denken, ich bin kein dummy, aber ich kann nicht mein jQuery horizontal slideshow animieren reibungslos, vor allem im FireFox (auf einem Mac). Jemand Rat?

Animation wird getan, wie folgt:

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

Beispiel-link:

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

InformationsquelleAutor Millions | 2010-05-03
  1. 7

    Habe ich getestet in Firefox, Chrome(dev) und Safari auf windows und die animation ruckelt in allen Browsern(aber mehr in der FF, obwohl).

    Zur Steigerung der JavaScript-performance könnten Sie loszuwerden, alle die getElementById oder $("div#mydividentyfier") nennt.
    Wenn Sie speichern Sie in der Variablen stattdessen werden Sie zwischengespeichert werden.
    Beispiel:
    Könnte es die Leistung erhöhen, ganz ein bisschen, um 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();
    }

    Ich würde auch empfehlen die Verwendung von data-URIs für die Bilder, wie es reduziert die Menge des httpRequests, die Sie haben zu machen, um die Seite geladen wird.

    InformationsquelleAutor gone
  2. 3

    Die animation sieht glatt für mich in Chrom. Ich glaube jedoch, es gibt mehrere Dinge, die Sie tun können, zu verbessern Glätte:

    Erste, es ist in Ordnung zum laden, alle Bilder im Voraus, wie Sie tun, hier (an der Spitze). Jedoch zeigt Sie alle auf einmal, wie in der "Beispiel-link", beeinträchtigt die Leistung, da Sie alle animieren auf einmal:

    <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 die-cue bis zum nächsten oder vorigen Bild auf beiden Seiten des aktuellen Bildes, aber dann nicht den rest der Bilder in der Seite, bis Sie gebraucht werden. (Vorausladen von Ihnen ist immer noch gut, obwohl.)

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

    1. Kleinere (durch Pixel-und/oder Dateigröße) Bilder.
    2. Kleinere code-Optimierungen mittels EDV Dinge im Voraus.
    3. Ein stand-alone-animation-Bibliothek anstelle von jQuery.
    InformationsquelleAutor Adam
  3. 2

    Können Sie auch wollen, verwenden Sie diese

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

    Statt 

    .animate({left: -((lookbook-1)*825)+'px'});
    • Ich Schätze, was Sie bekommen, sondern, dass Pausen das "snappen".
    InformationsquelleAutor bfred.it
Schreibe einen Kommentar