Defilement de texte, script js trop gourmand [Résolu]

elekaj34 · 02/07/2009, 08h56

Bonjour,

Je souhaite faire défiler verticalement un texte, mais sans la balise marquee (non conforme w3c).

J'ai utilisé le code suivant (inséré dans le head):

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
		<script type="text/javascript">
			function preload() {
				var e = document.getElementById('newsbox');
				e.onmouseover = function() { speed = 0; };
				e.onmouseout = function() { speed = 2; };
				startAnim()
			}
 
			var pos;
			var speed = 2;
			var pos_initial;
 
			function startAnim() {
				var e = document.getElementById('newsbox');
				pos_initial = e.clientHeight + 10;
				pos = pos_initial;
				setInterval('anim()', 2);
			}
			function anim() {
				var e = document.getElementById('newslist');
				e.style.visibility = 'visible';
				e.style.top = Math.floor(pos) + 'px';
				pos = pos - speed;
				if(pos < -e.clientHeight) pos = pos_initial;
			}
			// -->
		</script>

La balise body ressemble a ceci :

Code :

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

<body onload="preload()">

et le code ou le texte doit défiler :

Code :

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

1
2
3
4
5
6
7
8
9
10
				<div id='newsbox'>
					<div id='newslist' style='visibility: hidden'>
						<h1>Titre 1</h1>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
						<h1>Titre 2</h1>
						<p>Tincidunt ut laoreet dolore magna aliquam erat volutpat, ut wisi enim ad minim veniam</p>
						<h1>Titre 3</h1>
						<p>Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.</p>
					</div>
				</div>

Evidemment tout fonctionne au poil

Certes ... mais ce script a tendance a faire ramer le site. Par ex un clic sur un bete lien hypertexte tout con, le navigateur met bien 1 à 2 secondes pour prendre en compte

Sur des machines peu puissantes, le curseur de la souris saccade

Sur ma bécane, ou j'ai un affichage de l'utilisation CPU, j'ai un des cores (sur les deux de mon E6300) qui est utilisé à 100% !!!!

N'étant pas un féru du dev des javascript, puis je solliciter votre aide pour faire la même chose mais en moins gourmand

?

Merci

marcha · 02/07/2009, 09h05

Salut,

Code :

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

1
2
 
setInterval('anim()', 2);

Avec ce réglage, la fonction anim() est appelée toutes les 2 mili-secondes.
c'est trop rapide

Sachant que l'oeil réagit à environ 25 images secondes tu peux utiliser 50
milisecondes au lieu de 2

Ensuite, pour régler la vitesse de défilement tu modifie le nombre de pixels
de décalage à chaque interval, c'est à dire tu modifie la variable speed.

elekaj34 · 02/07/2009, 09h17

Merci

Avec

Code :

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

 setInterval('anim()', 50);

et un speed à 2 ou 3, le script est moins gourmand, le defilement fluide.

Par contre, pour des valeur de speed de 5 par exemple, je trouve que le décalage est trop grand, et la lisibilité du texte beaucoup moins bonne.

marcha · 02/07/2009, 10h23

Tu peux jouer un peu sur l'intervalle mais pas plus petit que 20 miliseconde d'après
mes tests.

La fluidité est souvent le fait d'un bon rapport entre le décalage (var speed) et le
réglage de l'intervalle.

02/07/2009, 09h17	#3
elekaj34 Membre à l'essai Inscription : mai 2007 Messages : 98 Détails du profil Informations forums : Inscription : mai 2007 Messages : 98 Points : 20 Points : 20	Merci Avec Code : Sélectionner tout - Visualiser dans une fenêtre à part setInterval('anim()', 50); et un speed à 2 ou 3, le script est moins gourmand, le defilement fluide. Par contre, pour des valeur de speed de 5 par exemple, je trouve que le décalage est trop grand, et la lisibilité du texte beaucoup moins bonne.
	00

02/07/2009, 10h23	#4
marcha Rédacteur/Modérateur Marc Chappuis Développeur Web Inscription : décembre 2003 Messages : 1 529 Détails du profil Informations personnelles : Nom : Marc Chappuis Âge : 41 Localisation : Suisse Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : décembre 2003 Messages : 1 529 Points : 2 193 Points : 2 193	Tu peux jouer un peu sur l'intervalle mais pas plus petit que 20 miliseconde d'après mes tests. La fluidité est souvent le fait d'un bon rapport entre le décalage (var speed) et le réglage de l'intervalle. __________________ Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email