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

**nicolas2603** · 07/04/2009, 12h14

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 :

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

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

2. Voici le code de la fonction :

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

**javatwister** · 07/04/2009, 12h21

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;

**le_chomeur** · 07/04/2009, 12h40

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

le pourquoi du comment =>

Code :

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

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 ?

**nicolas2603** · 07/04/2009, 13h03

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 :

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

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 :

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

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;
	}

**nicolas2603** · 07/04/2009, 13h05

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

**nicolas2603** · 07/04/2009, 12h41

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

MyObject is Null

au niveau de la fonction :

Code :

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

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

**javatwister** · 07/04/2009, 12h47

ah oui quand même...

d'où l'intérêt d'un killTimeout()

**E.Bzz** · 07/04/2009, 12h54

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

A+

**le_chomeur** · 07/04/2009, 12h58

Code :

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

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);
}