Optimisation de code javascript
Optimisation de code javascript - HTML/CSS - Programmation
Marsh Posté le 20-04-2010 à 10:58:27
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 
Marsh Posté le 21-04-2010 à 09:02:59
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.
Sujets relatifs:
- JSP + JavaScript
- Erreur 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 image
- code 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
Marsh Posté le 20-04-2010 à 10:00:55
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