mon script est trop lent !

08 juil. 2008, 21:49

Bonjour,

Je viens de réaliser une figurine et j'aimerais faire une animation sur mon site. J'ai donc pris 36 photos.

l'adresse du script est ici :
http://pagesperso-orange.fr/bull/archiv ... vision.htm

mon probleme, c'est que c'est tres lent et ca gache tout de plus je ne sais pas comment faire pour que ca tourne en boucle. Pour le moment, ca reste bloqué au début et a la fin.

Pourriez-vous m'aider ?

08 juil. 2008, 23:41

Regarde cet exemple, J'ai adapté ton script en mettant en avant des idées pour augmenter la réactivité de l'animation. Le mot clé ici est : setTimeout() qui est la fonction javascript qui exécute un processus dans le temps.

<html>
<head>
<script type="text/javascript">
// Variables globales
var urlImage = new Array(37), indexActuel = 1;
var vitesse = 0, sens = "suivant";
var process = null;
//
//
function precedent(){
  // Index Précédent
  indexActuel --;
  // Rembobiner si < à la première image
  if (indexActuel <1) indexActuel = urlImage.length -1; 
  // Afficher l'image
  document.getElementById("afficheurImage").src = urlImage[indexActuel].src;
}
//
function suivant(){
  // Index Précédent
  indexActuel ++;
  // Rembobiner si > à la dernière images
  if (indexActuel >= urlImage.length) indexActuel = 1; 
  // Afficher l'image
  document.getElementById("afficheurImage").src = urlImage[indexActuel].src;
}
//
function demarrer(){
    // Est réglable par : arrêt, vitesse et sens
    if (sens == "suivant") suivant(); else precedent();
    // Afficher les images en boucle à la vitesse donnée
    process = setTimeout('demarrer()', vitesse);
}
//
function arreter(){
    // Arrêter l'animation
    clearTimeout(process);
}
//
window.onload = function(){
   // Précharger les images dans un tableau
   for (i=1; i<37; i++){
    urlImage[i] = new Image();
    urlImage[i].src = "images/"+(i<10?"0"+i:i)+".jpg"; //format: images/99.jpg
   }
  // Afficher l'animation
  vitesse = 0; sens = "suivant";
  demarrer();
}

</script>
</head>

<body bgcolor="#FFFFFF">
<table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th colspan="4">
      <img name="afficheurImage" id="afficheurImage"  border="0" />
    </th>
  </tr>
  <tr>
      <th><img src="images/precedent.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="sens='precedent';" /></th> 
      <th><img src="images/marche.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="demarrer();" /></th>
      <th><img src="images/arret.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="arreter();" /></th>
      <th><img src="images/suivant.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="sens='suivant';" /></th>
  </tr>
  <tr>
      <th colspan="4">Vitesse <input value="0" size="3" onChange="vitesse=this.value" />(1000 = 1 seconde)</th>
  </tr>
</table>
</body>
</html>

Le principe est simple : Les Url des images sont stockées dans un tableau global, un compteur global permet de parcourir ces Url une par une pour les afficher dans une <img>. Le parcourt est assuré dans les deux sens (variable : sens) par une fonction demarrer() qui boucle automatiquement dans le temps par un setTimeout dont la vitesse est contrôlée par la variable : vitesse.
On peut aussi arrêter l'animation par la fonction : clearTimeout()

EDIT: J'ai ajouté le préchargement des images.

09 juil. 2008, 02:32

En complément du message de sadeq, il te faudra certainement précharger les images sinon l'animation risque d'avoir des blancs.

09 juil. 2008, 19:56

Merci,

je fais les testes de suite

mon script est trop lent !

Qui est en ligne