Defilement de texte, script js trop gourmand

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 :

		<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 :

<body onload="preload()">

et le code ou le texte doit défiler :

Code :

				<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 :

 
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 :

 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, 09h05	#2
marcha Modérateur Date d'inscription: décembre 2003 Localisation: Lausanne (CH) Âge: 39 Messages: 1 427	Salut, Code : 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. __________________ Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !

02/07/2009, 09h17	#3
elekaj34 Nouveau membre du Club Date d'inscription: mai 2007 Messages: 78	Merci Avec Code : 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.

02/07/2009, 10h23	#4
marcha Modérateur Date d'inscription: décembre 2003 Localisation: Lausanne (CH) Âge: 39 Messages: 1 427	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 !

		Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
Defilement de texte, script js trop gourmand

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