[POO] Optimisation de code pour défilement vertical de div

Version imprimable

Bonjour, je cherche à réaliser un effet de div défilant verticalement pour afficher des actualités. J'ai donc trouvé un script qui me permet de faire ça, mais à chaque fois que j'affiche la page je sens mon pc qui tourne à fond, comme si le code utilisait bcp de ressources.

C'est pourquoi je souhaiterais avoir votre avis sur la façon dont je fais scroller mon contenu, si il y a mieux, plus optimisé, plus simple ...

1. Ma fonction est appelée au chargement de la page comme ceci :

Code:

<body onLoad="InitObjet('scroll_actu')">

2. Voici le code de la fonction :

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
var bas_de_page=220;      // Position en bas de fenetre
var Hauteur=250;         //Hauteur du div   
var pos_x=0;            //Position du div (horizontal)
var pos_y=0;    //Position du div (vertical)
var MonObjet;
 
function GetObject(ID) {
   if (document.getElementById) {
      return document.getElementById(ID);
   }
   if (document.layers) {
      return eval('document.'+ID);
   }
   if (document.all) {
      return eval('document.all.'+ID);
   }
}
 
function InitObjet(ID) {            //Initialisation du DIV
   MonObjet = GetObject(ID);
   MoveTo(MonObjet, pos_x, bas_de_page);
   scroll();
}
 
function MoveTo(MyObject, x, y) {   // Déplacement du DIV
   if (document.getElementById||document.all) {
      MyObject.style.left = x + "px";
      MyObject.style.top = y + "px";
      return;
   }
   if (document.layers) MyObject.moveTo(x, y);
}
 
function scroll() {                  // Défilement du DIV
   if (pos_y > (-1 * Hauteur)) {      //Teste si le DIV est complètement sorti
      pos_y--;
      MoveTo(MonObjet, pos_x, pos_y)
   }
   else {
      pos_y=bas_de_page;
      MoveTo(MonObjet, pos_x, pos_y)
   }
   var timer = setTimeout('scroll();',20);
}

Merci d'avance.

07/04/2009, 11h21
javatwister

peut-être scroll() est-elle interprétée comme la bonne vieille méthode de window;

du coup, le timer fait double emploi et c'est le dawa;

essaie de changer le nom de cette fonction;
07/04/2009, 11h40
le_chomeur

lol javatwister ^^ , si c'était le cas il y aurait une plante :)

le pourquoi du comment =>

Code:

var timer = setTimeout('scroll();',20);

appelé toute les 20 millisecondes, va surcharger ton processeur.
de plus tu assignes ton setTimeout mais tu ne le tue jamais ( pas grave dans notre situation car tu fais un appel récursif sur ta méthodes ... )

petit conseil : fait une méthode te permettant de calculer la hauteur de ton conteneur et en déplaçant le contenu via la propriété top plutôt que le scroll, un exemple de ton code html ?

Non apparemment ça ne change rien. De plus, j'ai une erreur javascript lorsque je vais sur d'autres pages, il me dit :

Citation:

MyObject is Null

au niveau de la fonction :
Code:

1 2 3 4 5 6 7 8 function MoveTo(MyObject, x, y) { // Déplacement du DIV if (document.getElementById||document.all) { MyObject.style.left = x + "px"; MyObject.style.top = y + "px"; return; } if (document.layers) MyObject.moveTo(x, y); }
J'ai oublié de préciser que mon site est construit sur un modèle de conteneur dynamique, avec le header, le menu et le footer fixes, et un conteneur qui m'affiche les différentes pages. Donc le onload est appelé à chaque changement de pages !! Je viens de m'en rendre compte...

07/04/2009, 11h47
javatwister

ah oui quand même...

d'où l'intérêt d'un killTimeout() :mrgreen:
07/04/2009, 11h54
E.Bzz

clearTimeout() même si le sens est le même ;)

A+

Code:

1
2
3
4
5
6
7
8
function MoveTo(MyObject, x, y) {   // Déplacement du DIV
   if (document.getElementById||document.all) {
      MyObject.style.left = x + "px";
      MyObject.style.top = y + "px";
      return;
   }
   if (document.layers) MyObject.moveTo(x, y);
}

je te laisse analyser .....

Code:

fonction : MoveTo(MyObject, x, y)

appel de ta méthode :

Code:

MyObject.moveTo(x, y);

Citation:

Envoyé par le_chomeur

petit conseil : fait une méthode te permettant de calculer la hauteur de ton conteneur et en déplaçant le contenu via la propriété top plutôt que le scroll, un exemple de ton code html ?

La hauteur de mon conteneur est fixée par une propriété CSS ! Le code de mon conteneur + div qui scrolle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p class="titre_actualites">ACTUALIT&Eacute;S</p>
	<div class="conteneur">
		<div id="scroll_actu" class="txt_actualites">
		<?php
                $varN=1;
                while ($varNtotal = mysql_fetch_array($varActualites) ) {
                        $annee = substr($varNtotal['dat'], 0, 4);
                        $mois = substr($varNtotal['dat'], 5, 2);
                        $jour = substr($varNtotal['dat'], 8, 2); ?>
			<?php echo $jour . '-' . $mois . '-' . $annee; ?> :<br />
			<a href="index.php?page=actualités&id=#<?php echo $varNtotal['id']; ?>"><?php echo $varNtotal['titre']; ?></a><br /><br />
		<?php } ?>
		</div>
</div>

avec les codes CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
#c_accueil_actu .conteneur {
	position: absolute;
	top: 60px;
	left: 20px;
	width: 183px;
	height: 223px;
	overflow: hidden;
	}
 
#c_accueil_actu .txt_actualites {
	position: relative;
	text-align: justify;
	}

07/04/2009, 12h05
nicolas2603

Oui effectivement il appelle l'objet dans la fonction. Cet objet n'est pas présent dans les autres pages, donc il ne le trouve pas et retourne une erreur...

Je me permets un petit aparté au sujet de :
Code:

1 2 3 4 5 6 7 8 9 10 11 function GetObject(ID) { if (document.getElementById) { return document.getElementById(ID); } if (document.layers) { return eval('document.'+ID); } if (document.all) { return eval('document.all.'+ID); } }
Pour info, getElementById est reconnu par IE depuis la version 5, donc à moins que tu connaisse encore des gens qui utilisent IE4 ou Netscape4, cette fonction ne sert absolument à rien !

07/04/2009, 12h42
nicolas2603

:? ouais donc en fait ce script que j'ai trouvé est complètement nul en fait ! Ou du moins bien obsolète ... Je vais chercher une autre méthode.

Et que pensez-vous de la balise <marquee> ? Je viens de la découvrir et ça fonctionne plutôt pas mal !!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="conteneur">
	<marquee onMouseOver="this.stop()" onMouseOut="this.start()" scrollAmount="2" direction="up" height="230px" style="text-align: justify">
	<?php
        $varN=1;
        while ($varNtotal = mysql_fetch_array($varActualites) ) {
                $annee = substr($varNtotal['dat'], 0, 4);
                $mois = substr($varNtotal['dat'], 5, 2);
                $jour = substr($varNtotal['dat'], 8, 2); ?>
		<?php echo $jour . '-' . $mois . '-' . $annee; ?> :<br />
		<a href="index.php?page=actualités&id=#<?php echo $varNtotal['id']; ?>"><?php echo $varNtotal['titre']; ?></a><br /><br />
	<?php } ?>
	</marquee> 
</div>

A moins qu'elle ne soit pas conseillée ? Est-il possible de faire en sorte que le défilement débute dans la position actuelle du texte, et non forcément du bas du conteneur !