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

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

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, 11h21

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, 11h40

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, 11h41

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, 11h47

ah oui quand même...

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

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

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

A+

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

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

je te laisse analyser .....

Code :

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

fonction : MoveTo(MyObject, x, y)

appel de ta méthode :

Code :

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

MyObject.moveTo(x, y);

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

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, 12h05

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

**Bovino** · 07/04/2009, 12h07

Je me permets un petit aparté au sujet de :

Code :

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

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 !

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

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.

**nicolas2603** · 07/04/2009, 14h37

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

Code :

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

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 !

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

JavaScript

Discussions similaires

Partager

Partager