Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire Cours JavaScript, FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
Vieux 02/07/2009, 08h56   #1
Nouveau membre du Club
 
Date d'inscription: mai 2007
Messages: 78
Par défaut Defilement de texte, script js trop gourmand

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
elekaj34 est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 02/07/2009, 09h05   #2
Modérateur
 
Avatar de marcha
 
Date d'inscription: décembre 2003
Localisation: Lausanne (CH)
Âge: 39
Messages: 1 427
Par défaut

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 !
marcha est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 02/07/2009, 09h17   #3
Nouveau membre du Club
 
Date d'inscription: mai 2007
Messages: 78
Par défaut

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.
elekaj34 est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 02/07/2009, 10h23   #4
Modérateur
 
Avatar de marcha
 
Date d'inscription: décembre 2003
Localisation: Lausanne (CH)
Âge: 39
Messages: 1 427
Par défaut

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 !
marcha est déconnecté   Envoyer un message privé Réponse avec citation
NEWS JAVASCRIPTF.A.Q JSTUTORIELS JSSOURCES JSLIVRES JS

Réponse Proposer ce sujet en actualité

Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript



Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are non
Pingbacks are non
Refbacks are non



Fuseau horaire GMT +1. Il est actuellement 22h30.


Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.