Discussion :

[flarin]

Bonjour,

Existe-t-il une fonction Javascript qui permet d'attendre le rafraichissement vertical de l'écran (Vertical Synchronisation) ?

(C'est pour améliorer la fluidité d'un scroll image javascript/css)

[le_chomeur]

heu non , mais par contre on peut surement améliorer ton code

[flarin]

Merci pour ta réponse.

Voici donc le code:
(Ce n'est pas un code final, juste un code pour tester la routine)

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
 
******************
**** JAVASCRIPT ****
******************
<script> 
 
var pos_x = 0; 
var pos_y = 0;
 
var affiche_position = '0px 0px';
 
function add_right()
{
	if ( pos_x > -1199 ) //juste pour stoper a droite
	{
		pos_x = pos_x - 1;
	}
 
	affiche_position =  pos_x + 'px ' + ' ' + pos_y + 'px';
	document.getElementById('moment_2_scroll').style.backgroundPosition = affiche_position;
 
	return;
}
 
function move_right()
{
	mon_timer = setInterval("add_right()",16); 
	return;
}
 
function add_left() 
{
	if (pos_x < -1) //pour stoper a gauche
	{
	 pos_x = pos_x + 1;
	}
 
	affiche_position =  pos_x + 'px ' + ' ' + pos_y + 'px';
 
	document.getElementById('moment_2_scroll').style.backgroundPosition = affiche_position;
 
	return;
}
 
function move_left()
{
		mon_timer = setInterval("add_left()",16); 
		return;
}
 
function add_up() 
{
	if (pos_y < -1) //pour stoper en haut
	{
	 pos_y = pos_y + 1;
	}
 
	affiche_position =  pos_x + 'px ' + ' ' + pos_y + 'px';
 
	document.getElementById('moment_2_scroll').style.backgroundPosition = affiche_position;
 
	return;
}
 
function move_up()
{
		mon_timer = setInterval("add_up()",16); 
		return;
}
 
function add_down()
{
	if (pos_y > -598) //pour stoper en bas
	{
	 pos_y = pos_y - 1;
	}
 
	affiche_position =  pos_x + 'px ' + ' ' + pos_y + 'px';
 
	document.getElementById('moment_2_scroll').style.backgroundPosition = affiche_position;
 
	return;
}
 
function move_down()
{
		mon_timer = setInterval("add_down()",16); 
		return;
}
 
function stopmove()
{
		clearInterval(mon_timer);
		return;
}
 
 
</script> 
 
*************
**** HTML ****
*************
 
//----la boxe qui contient l'image en background----
<div id="moment_2_scroll">
</div>
 
//----mes 4 boxes pour activer le scroll----
<div id="moment_2_button_scroll_inverse" onMouseover ="javascript:move_right();" 
onMouseout ="javascript:stopmove();">
</div>
 
<div id="moment_2_button_scroll" onMouseover ="javascript:move_left();" 
onMouseout ="javascript:stopmove();">
</div>
 
<div id="moment_2_button_scroll_up" onMouseover ="javascript:move_up();" 
onMouseout ="javascript:stopmove();">
</div>
 
<div id="moment_2_button_scroll_down" onMouseover ="javascript:move_down();" 
onMouseout ="javascript:stopmove();">
</div>
 
************
**** CSS ****
************
 
#moment_2_scroll
{
display : block; 
position : absolute;
top : 0px;
left : 0px;
width : 800px;
height : 600px;
overflow : hidden;
background: url(../../images/moment_2/moment_2_scroll.jpg) no-repeat 0px 0px;
}

Le but étant de faire un scroll multi-directionnel en utilisant la technique de modification dynamique du css par du javascript.
J'ai 4 boxes-flèches à l'écran, et quand on passe la souris dessus, l'image de fond scroll dans la direction désiré.
Je charge une image 2000*1200 dans un DIV qui fait 800*600.

Le résultat est "correct", mais il subsiste des petits "décalages" qui sont caractéristiques des problèmes de synchro écrans (VBL).
(j'ai essayé avec une petite image c'est pareil).

[Bovino]

2 choses peuvent être améliorées à première vue :

Code :

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

mon_timer = setInterval("add_right()",16);

Passer une chaîne en argument n'est pas recommandé (utilisation de la méthode eval() et perte de perforamance), utilises plutôt :

Code :

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

mon_timer = setInterval(add_right,16);

Code :

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

1
2
onMouseover ="javascript:move_right();" 
onMouseout ="javascript:stopmove();"

Les événements JavaScript (qu'il est préférable d'écrire sans majuscule, notamment en xhtml) attendent du code JavaScript, donc, pas besoin de le préciser, de plus, il faut éviter les espaces avant le '=' :

Code :

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

1
2
onmouseover="move_right();" 
onmouseout="stopmove();"

[flarin]

Merci pour ces précisions, je viens de modifier le code.

Même si ca ne change pas mon scroll, c'est toujours mieux de savoir coder proprement .

Je continue mes recherches pour améliorer mon défilement. Il y a pas mal de choses sur le web utilisant la librairie "scriptaculous", mais en regardant un peu le source des fonctions, je crois qu'ils ne font rien de plus, donc ca doit être le même resultat.

[flarin]

Bon comme apparemment ce n'est pas possible, je marque ce post comme résolu.