jQuery animations sont saccadées et de bégayer dans Firefox
J'aime à penser que je ne suis pas un mannequin, mais je ne peux pas obtenir mon jQuery horizontal diaporama pour animer en douceur, en particulier dans FireFox (sur un Mac). Quelqu'un a des conseils?
Animation est en train d'être fait comme suit:
$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});
Exemple de lien:
http://mayfourteenth.com/w/lookbook?preview=1
OriginalL'auteur Millions | 2010-05-03
Vous devez vous connecter pour publier un commentaire.
Je l'ai testé dans Firefox, google Chrome(dev) et Safari sur windows et l'animation est saccadée dans tous les navigateurs(mais plus dans la FF).
Pour augmenter les performances JavaScript vous pourriez se débarrasser de tous les getElementById ou $("div#mydividentyfier") appels.
Si vous les stocker dans des variables au lieu de cela, ils seront mis en cache.
Exemple:
Il pourrait augmenter les performances tout à fait un peu pour ce faire:
Au lieu de:
Je vous recommande également à l'aide de données Uri pour les images, car elle réduit la quantité de httpRequests vous avez à faire pour obtenir la page chargée.
OriginalL'auteur gone
L'animation semble lisse pour moi sur Chrome. Cependant, je crois qu'il y a plusieurs choses que vous pouvez faire pour améliorer la fluidité:
D'abord, c'est bien pour précharger toutes les images à l'avance que vous ne ici (en haut). Toutefois, l'affichage de toutes à la fois, comme dans le "Exemple de lien", ce qui affecte les performances, car ils sont tous d'animer à la fois:
Au lieu de cela, vous pouvez simplement transférer l'image suivante ou précédente sur les côtés de l'image en cours, mais ne pas avoir le reste des images dans la page jusqu'à ce qu'ils sont nécessaires. (Préchargement est toujours très bien.)
D'autres choses qui peuvent améliorer légèrement les performances sont des choses comme les suivantes:
OriginalL'auteur Adam
Vous pouvez également utiliser cette
Au lieu de
OriginalL'auteur bfred.it