Discussion :

[chicorico]

Bonjour,

J'aimerais savoir s'il est possible d'optimiser le code suivant car je trouve que le défilement d'images horizontales n'est pas très fluide lorsqu'il y a une centaines d'images.
Sur un pc récent c'est fluide, sur un PC plus vieux genre pentium4, amd64 c'est moins fluide.

Les facteurs limitant semblent être la résolution et le nombre d'images.
J'ai essayé de cacher les images qui n'étaient pas visibles à l'écran mais ca ralentissait plus qu'autre chose.
Après quelques tests c'est l'assignation de la nouvelle position qui semble lent :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

imgs[i].style.left= (parseInt(imgs[i].style.left) - iStep)+"px";

Avez-vous des idées pour optimiser ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
/* 
   imgs est un tableau global contenant les images
   Un seul appel getElementByTagName est fait sur le onload de la page
   pour optimiser.
*/
 
/*   <-    */
function moveLeft(){
	var iStep = parseInt(speed);
 
	if (parseInt(imgs[nbImg-1].style.left)> halfScreen){
		for(i=0; i<nbImg; i++){
			imgs[i].style.left=(parseInt(imgs[i].style.left) - iStep)+"px";
			/*var left = parseInt(imgs[i].style.left);
			if (left <= clientWidth)
				show("img"+(i+1));//imgs[i].style.visibility="visible";
 
			if (left +  parseInt(imgs[i].width) + 10 <= 0)
				hide("img"+(i+1));//imgs[i].style.visibility="hidden";*/
		}
 
	}
}
/*   ->    */
function moveRight(){
	var iStep = parseInt(speed);
 
	if (parseInt(imgs[1].style.left) < halfScreen){
		for(i=nbImg-1; i>=0; i--){
			imgs[i].style.left=(parseInt(imgs[i].style.left) + iStep) + "px";
			/*var left = parseInt(imgs[i].style.left);
			if (left >= clientWidth)
				///hide("img"+(i+1));
				//imgs[i].style.visibility="hidden";
 
			if (left +  parseInt(imgs[i].width) + 10 >= 0)
				///show("img"+(i+1));
				//imgs[i].style.visibility="visible";*/
		}
	}
}
/* Appel sur le onmousemove du body */
function position(event) {
	var x = 0;
 
	if (slide == 1){
		x=event.clientX;
 
       	speed = 4*(Math.abs(halfScreen-x) / halfScreen);
 
		if (x < halfScreen)
		{
				//Si la souris est à gauche on déplace de gauche à droite
				clearInterval(timerSlideL);						
				timerSlideL = setInterval(moveRight, time );
		}
		else{
				//Si la souris est à droite on déplace de droite à gauche
				clearInterval(timerSlideL);
				timerSlideL = setInterval(moveLeft, time );
		}
	}
}

Merci d'avance.

Chicorico.

[scourjean]

Oui résolution et nombre d'images trop grand ne font pas bon ménage.

Après tu peux essayer de charger les images une par une via ajax ou le nombre que tu veux mais pas une centaine. Et voir si tu ne peux pas redimensionner tes images à la taille voulue.

[chicorico]

Merci pour cette réponse.

Je précise que la taille d'une image est fixe (320*240), elle n'est donc pas redimensionnée.

Mes images sont incluses dans une balise "div" je me demandais si en faisant bouger cette div cela ne changerais pas la fluidité ?

[Bovino]

Oui bien sûr.
Il faut savoir que chaque modification de style entraine un reflow, donc dans ton cas, tu forces autant de reflows qu'il y a d'images, du coup, c'est sûr qu'avec une centaine d'images, ça alourdit énormément le travail !
Donc effectivement, le mieux à mon sens serait de modifier uniquement la position de la div englobante que celle de chaque image une à une.

A noter aussi que c'est cette notion de reflow qui explique le mauvais rendu pour la manipulation des tableaux importants (l'affichage d'un tableau et donc son reflow est très lourd à gérer pour les navigateurs). De la même façon, il est important d'utiliser la propriété cssText au lieu des propriétés individuelles de style.

[SpaceFrog]

perso je passerais par animate de jquery ...

[chicorico]

Merci pour vos réponses.

Pour SpaceFrog :
-Pourquoi animate serait plus fluide que ce bout de code ?

Pour bovino:
-Passer par un div serait une solution mais m'oblige à revoir une grande partie de mon code ainsi que le positionnement des mes images(elles sont en position:absolute), donc avant de modifier mon code j'aimerais être sur que le rendu sera bien plus fluide. Est-ce le cas ?

-Concernant le "reflow" ne dépend-t-il pas des navigateurs, je veux dire une optimisation sur le reflow pour firefox donnera-t-il le même résultat sur tout les navigateurs ?
-Toujours sur le "reflow" y-a-t-il un moyen de connaitre le nombre de reflow réellement fait par le navigateur ?
-Pour finir sur le "reflow" je croyais que celui-ci concernait uniquement la partie impactée et non toute la page. En effet, je déplace uniquement les images contenues dans le div, je suis étonné que tous le flux de la page soit impacté ?

-Enfin concernant cssText cela améliorait-il vraiment les performances sur tous les navigateurs ? Le site http://jsperf.com/csstext-vs-style-properties tant à confirmer que le style individuel est quand même plus rapide, qu'en pensez-vous ?

Chicorico.