Je suis actuellement en train de créer un simple "curseur d'image jQuery" mais cela ne fonctionne pas comme je l'espérais. C'est incroyablement lent et ne répond pas, et la dernière image ne fait rien.jQuery Image Slider - Problèmes de performances
URL: http://fusionmedia.dk/jquery/
Quel est le problème?
Merci à l'avance
Spécifiez une vitesse plus rapide. Son défaut à une vitesse plus lente.
$('#gallery').delegate('img', 'mouseover', function() {
$this = $(this);
for(var i = 0; i <= $this.siblings().size(); i++) {
if($this.index() > i) {
$this.siblings().eq(i).stop().animate({ left: (i * 50) + 'px' }, 300);
} else {
$this.siblings().eq(i).stop().animate({ left: ((i * 50) + 500) + 'px' }, 300);
}
}
});
EDIT:
Vous avez 2 problèmes vraiment mauvais pour la vitesse. 1: Vous exécutez une boucle coûteuse en temps chaque fois qu'ils survolent. 2: Vous appelez $ this.siblings() trop de fois. Cache cela.
Voici un exemple de la meilleure façon d'implémenter une partie de ceci, je vous ai toujours boucler à l'intérieur de l'événement hover, vous devriez essayer de le faire sortir.
$(function(){
$('#gallery').find('img').each(function(){
$this = $(this);
$this.css('left', $this.index() * 50 + 'px');
});
$('#gallery').delegate('img', 'mouseover', function(){
$this = $(this);
var $sibs = $this.siblings();
for (var i = 0; i <= $sibs.size(); i++) {
if ($this.index() > i) {
$sibs.eq(i).stop().animate({
left: (i * 50) + 'px'
});
} else {
$sibs.eq(i).stop().animate({
left: ((i * 50) + 500) + 'px'
});
}
}
});
});
Il depeneds sur diverses choses, Chargez-vous toutes les images dès le départ et même la taille des questions images beaucoup. Toutes les demandes suivantes doivent être mises en cache dans le navigateur.
vous devriez utiliser des mécanismes de mise en cache si possible.
Je ne vois pas pourquoi la taille de l'image signifie quelque chose, quand la seule chose que je suis en train de faire est de changer la position gauche – Mikkel
Eh bien, le problème est pas le temps de transition d'animation, plutôt l'espace entre, il ne se sentir aussi vif que je le voudrais. Ça devrait être comme ça: http://lars.wi12.ots.dk/jquery/galleri.html – Mikkel
Ah, je vois. Vous devez arrêter toutes les autres animations avant d'appeler la suivante. Remarquez que sur le site accrocheur, il n'est pas nécessaire d'animer tous les autres lorsque vous passez la souris comme le vôtre. J'ai édité ma réponse – UpHelix
Maintenant ça marche presque, mais le dernier n'apparaît toujours pas, et parfois aucun d'entre eux ne fonctionne (quand je passe la souris sur l'un d'eux à côté) – Mikkel