Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1566 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Optimisation de code javascript

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Optimisation de code javascript

n°1985760
proximcrea​tion
Posté le 20-04-2010 à 10:00:55  profilanswer
 

Bonjour,
 
je suis en train de développer un site en joomla, et je l'ai agrémenté de quelques animations :
 - dans une colonne à droite du site, j'ai des silhouette d'instruments de musiques et des notes de musiques qui tombent en boucle
 - sur une de mes page, j'ai mis un "slider" un menu horizontal dont seulement une partie est visible, et on déplace le cadrage avec deux boutons (onmouseover)
 
Le fait est que le slider fait "hurler" ma machine, et l'animation saccade. J'ai donc décidé d'arrêter la chute des instrus sur cette page, mais ça n'améliore pas grand chose.
 
Je souhaiterais savoir si je peux optimiser mon javascript afin d'améliorer l'animation.
 voici le js :


var main = {
 init: function(){
  // dimensionnement d'un div n'apparaissant que sur une page.
  if(document.getElementById("current" ) && document.getElementById("current" ).className.contains("item53" )){
   thumbnails = document.getElementsByClassName("slider_thumbnail" );
   thumbnailWidth = thumbnails[0].offsetWidth;
   document.getElementById("slider_selecteur" ).style.width = thumbnailWidth*thumbnails.length + "px";
  }
 }
}
var global = {
 // appel récursif des script tournant en boucle sur la page.
 recurse: function(dt){
  // if arrêtant la chute des instrus sur la page contenant le slider (optimisation)
  if(document.getElementById("current" ) && document.getElementById("current" ).className.contains("item53" )){
   slider.slide();
  }
  else{
   bulle.move('instru5', -75, 0.5);
   bulle.move('instru1', -250, 0.7);
   bulle.move('instru2', -70, 0.4);
   bulle.move('instru3', -400, 0.8);
   bulle.move('instru4', -50, 0.6);
   bulle.move('bulle1', -100, 0.5);
   bulle.move('bulle2', -170, 0.3);
   bulle.move('bulle3', -200, 0.7);
   bulle.move('bulle4', -50, 0.4);
  }
   
  setTimeout('global.recurse('+dt+')', dt);
 }
}
var bulle = {
 move: function(Id, offsetTop, vitesse){
  objBulle = document.getElementById(Id);
  divBas = document.getElementById("bas" );
  divHaut = document.getElementById("haut" );
  pas = 10*vitesse;
   
  // Gestion hauteur
  initPosTop = offsetTop;
  targetPosTop = divBas.offsetTop;
  posTop = util.retirePx(objBulle.style.top);
   
  if(posTop*1 < targetPosTop*1){
   objBulle.style.top = posTop*1 + pas*1 + "px";
  }
  else {
   objBulle.style.top = initPosTop + "px";
  }
   
  // Appel récursif
  //setTimeout('bulle.move("'+Id+'",'+offsetTop+','+vitesse+')', 30);
 }
}
 
var gSens = "N";//sens de déplacement du slider
var slider = {
 slide : function(){
  lObSelecteur = document.getElementById("slider_selecteur" );
  lObSelecteurWidth = util.retirePx(getvalueCSS("slider_selecteur","width" ));
  lObSelecteurMinMarginL = util.retirePx(getvalueCSS("slider_conteneur","width" )) - lObSelecteurWidth ;
  lObSelecteurMarginL = util.retirePx(getvalueCSS("slider_selecteur","marginLeft" ));
   
  if(gSens != "N" && lObSelecteurMarginL >= lObSelecteurMinMarginL && lObSelecteurMarginL <= 0){
   if(gSens=="R" ){
    if(lObSelecteurMarginL < 0){
     lObSelecteurMarginL = lObSelecteurMarginL*1+5*1;
    }
   }
   if(gSens=="L" ){
    if(lObSelecteurMarginL > lObSelecteurMinMarginL){
     lObSelecteurMarginL = lObSelecteurMarginL*1-5*1;
    }
   }
   lObSelecteur.style.marginLeft = lObSelecteurMarginL + "px";
  }
  //setTimeout('slider.slide()',30);
 }
}
 
// UTILS
function getvalueCSS(pId,pStyleProp){
    var ObjetStyle = document.getElementById(pId);
    var result="";
    if (ObjetStyle.currentStyle){
      result = ObjetStyle.currentStyle[pStyleProp];
    }else if (window.getComputedStyle){
      result = document.defaultView.getComputedStyle(ObjetStyle, null)[pStyleProp];
    }
    return result;
}
var util = {
 retirePx: function(texte){
  try{
  if(texte.contains("px" )){
         return texte.substring(0, texte.length-2);
  }
  }catch(e){
   return texte.substring(0, texte.length-2);
  }
 }
}


 
les appels :  


<body  
 onload="
 main.init();
 sortBrassman();
 global.recurse(50);"  
 onmousemove="
 slide('brassman');">


 
le css du slider :


div#slider_conteneur {
 background-color: #000;
 width: 900px;
 height: 125px;
 margin: 0 auto;
 overflow: hidden;
}
div#slider_selecteur {
 width: 700px;
 height: 100px;
 float: left;
 margin-left: 0px;
}
a.slider_thumbnail, span.slider_thumbnail {
 background-color: #fff;
 display: block;
 border: solid 1px #f00;
 height: 98px;/*real=100px*/
 width: 98px;/*real=100px*/
 float: left;
}
div#slider_to_L, div#slider_to_R {
 background-color: #f00;
 height: 20px;
 width: 50%;
 margin: 0px 0px 5px 0px;
 float: right;
}
div#slider_to_L:hover, div#slider_to_R:hover {
 background-color: #800;
}


 
Si quelqu'un a quelques pistes de réflexion, cela m'aiderai grandement.
Bonne journée, et merci d'avance.


Message édité par proximcreation le 20-04-2010 à 10:01:46
mood
Publicité
Posté le 20-04-2010 à 10:00:55  profilanswer
 

n°1985806
olivthill
Posté le 20-04-2010 à 10:58:27  profilanswer
 

Désolé, mais je crains qu'il n'y ait pas grand chose à faire, si ce n'est avoir une meilleure machine et un meilleur navigateur, mais on ne peut pas imposer ça à tous les internautes.
 
J'avais mis des flocons de neige qui tombaient. Mais cela prenait aussi beaucoup trop de ressources pour ce que c'était, et n'ayant pas trouvé d'optimisations suffisantes, j'ai dû les enlever :(

n°1986152
proximcrea​tion
Posté le 21-04-2010 à 09:02:59  profilanswer
 

content de savoir que mon code est optimisé, c'est déjà ça :)
merci pour ta réponse en tout cas.
 
Je laisse le sujet ouvert éventuellement pour récupérer d'autres points de vues, et je le clos demain ou après demain.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Optimisation de code javascript

 

Sujets relatifs
JSP + JavaScriptErreur code VBA sur Excel2007
[Javascript] Site sensible - Sécurité et framework?code java pour afficher un frame en click sur le menu en netbeans
javascript desactiver clic droit sur une imagecode java pour afficher un frame en click sur le menu netbeans
Sujet: Recupéré code source page file_get_contents()code connexion sql server à, partir d'un code access
[RESOLU] suis perdu sur mon bout de code 
Plus de sujets relatifs à : Optimisation de code javascript


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR