Le animazioni jQuery sono instabili e intermittenti in Firefox

Question

Mi piace pensare di non essere un maniaco, ma non riesco a ottenere la mia presentazione orizzontale jQuery per animare agevolmente, specialmente in FireFox (su un Mac). Qualcuno ha un consiglio?

animazione è stato fatto in questo modo: Link

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

Esempio:

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

Answer 1

L'animazione appare liscia per me in Chrome. Tuttavia, credo che ci siano diverse cose che puoi fare per migliorare la scorrevolezza:

Innanzitutto, è bene precaricare tutte le immagini in anticipo come si fa here (in alto). Tuttavia, la visualizzazione di tutti in una volta, come nel "Example link", fa male le prestazioni, in quanto sono tutti animando in una volta:

<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> 

Invece di fare questo, si può semplicemente stecca su l'immagine successiva e precedente su entrambi i lati l'immagine corrente, ma poi non hanno il resto delle immagini nella pagina finché non sono necessarie. (Precaricandole è ancora bene però.)

Altre cose che possono migliorare le prestazioni un po 'sono cose come le seguenti:

1. Utilizzare più piccoli (da pixel e dimensioni o/file di immagini).
2. Ottimizza il codice secondario calcolando le cose in anticipo.
3. Utilizzare una libreria di animazione standalone anziché jQuery.

Answer 2

Ho testato in Firefox, Chrome (dev) e Safari su Windows e l'animazione balbetta in tutti i browser (ma più in FF però).

Per aumentare le prestazioni di JavaScript è possibile eliminare tutte le chiamate getElementById o $ ("div # mydividentyfier"). Se li si archivia in variabili, invece, verranno memorizzati nella cache. Esempio: potrebbe aumentare le prestazioni un po 'per fare questo:

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(); 
    } 

Invece di:

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

Vorrei inoltre consiglia di utilizzare URI dati per le immagini in quanto riduce la quantità di httpRequests voi fare per ottenere la pagina caricata.

Answer 3

Si consiglia inoltre di utilizzare questo

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

Invece di

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