Las animaciones de jQuery son entrecortadas y tartamudean en Firefox

Question

Me gusta pensar que no soy un maniquí, pero no puedo hacer que mi presentación horizontal de jQuery se pueda animar sin problemas, especialmente en Firefox (en una Mac). Alguien tiene un consejo?

animación se está haciendo de este modo:

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

Ejemplo enlace:

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

Answer 1

La animación se ve sin problemas para mí en Chrome. Sin embargo, creo que hay varias cosas que puede hacer para mejorar la uniformidad:

En primer lugar, está bien cargar previamente todas las imágenes como lo hace con here (en la parte superior). Sin embargo, se presentan todos a la vez, como en el "Example link", afecta negativamente al rendimiento, ya que todos están animando a la vez:

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

lugar de hacer esto, sólo tiene que avanzar hasta la imagen siguiente y anterior a ambos lados de la imagen actual, pero luego no tiene el resto de las imágenes en la página hasta que se necesiten. (La carga previa de ellos es todavía muy bien, aunque.)

Otras cosas que pueden mejorar ligeramente el rendimiento son cosas como la siguiente:

1. usar (por píxeles y/o tamaño de archivo de imágenes más pequeñas).
2. Realice optimizaciones menores de código calculando cosas con anticipación.
3. Use una biblioteca de animación independiente en lugar de jQuery.

Answer 2

He probado en Firefox, Chrome (dev) y Safari en Windows y la animación tartamudea en todos los navegadores (pero más en FF).

Para aumentar el rendimiento de JavaScript, puede deshacerse de todas las llamadas getElementById o $ ("div # mydividentyfier"). Si las almacena en variables, se almacenarán en caché. Ejemplo: Podría aumentar el rendimiento un poco para hacer esto:

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

En lugar de:

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

Yo también recomendaría el uso de URIs de datos de las imágenes, ya que reduce la cantidad de httpRequests se tiene que hacer para cargar la página.

Answer 3

También es posible que desee utilizar este

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

En lugar de

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