Optimisation défilement images
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:
imgs[i].style.left= (parseInt(imgs[i].style.left) - iStep)+"px";
Avez-vous des idées pour optimiser ce code :
Code:
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.
