Eric Quillévéré
An@lyste-progr@mmeur

Index des forums

Base de connaissances

Groupe "Internet / Javascript"

Se connecter

Répondre

Trouver un message :

Rechercher

Jamais inscrit sur ce forum

Identifiant (pseudo) :
Mot de passe :
Courriel :
Ville/pays (facultatif) :
Attention, si vous utilisez Hotmail/Live, vous risquez de ne pas pouvoir vous inscrire car ce fournisseur bloque exagérément les messages.
M'inscrire

Déjà inscrit sur ce forum

Identifiant :
Mot de passe :
Me connecter

Déjà inscrit mais sans mot de passe

Vous avez perdu votre mot de passe ? Vous pouvez en recevoir un autre en indiquant ci-dessous l'adresse du courriel utilisé lors de l'inscription.
Mon courriel :
Envoyer courriel

Accélérer les animations Javascript

Il existe différentes techniques pour accélérer l'exécution de code Javascript sur les animations. En voici l'une d'entre elles qui a une efficacité impressionnante.

Prenons l'exemple d'une fonction déroulant un objet nommé "mondiv" :

deroule ('mondiv', 0 ,100);

function deroule (objNom, hauteurActu, hauteurFin)
    {
    obj=document.getElementById(objNom);
    hauteurActu+=10;
    if (hauteurActu>=hauteurFin)
        hauteurActu=hauteurFin;
    else
        setTimeout('deroule(\'' + objNom + '\', ' + hauteurActu + ', ' + hauteurFin + ')',15);
    obj.style.height=hauteurActu + 'px';
    }

Malgré la simplicité de cette fonction, elle peut quand même être largement plus optimisée, et ce de plusieurs façons :
- en évitant document.getElementById, qui oblige à rechercher l'objet dans le DOM à chaque appel.
- en précalculant les hauteurs : avant l'appel de fonction, on peut tout à fait stocker les hauteurs à fixer dans un tableau, ce qui évite un calcul (le calcul est simple ici, mais imaginez qu'on agisse aussi sur la largeur, la position, l'opacité...).
- en précréant les fonctions : si, au lieu d'appeler une fonction, on effectue tout de suite le décalage, on gagne du temps !

tab_Appels=Array();
tab_Params=Array();
tab_Anim=0;

function deroule (objNom, hauteurActu, hauteurFin)
    {
    obj=document.getElementById(objNom);
    while (hauteurActu=hauteurFin) hauteurActu=hauteurFin;

        tab_Params.push({hauteur:hauteurActu, objet:obj});

        tab_Appels.push(function (params)
            {
            params.objet.style.height=params.hauteur + 'px';
            });

        }
    deroule_demarre();

    }

function deroule_demarre()
    {
    tab_Appels[tab_Anim] (tab_Params[tab_Anim]);
    tab_Anim++;
    if (tab_Anim<tab_Appels.length)        setTimeout(deroule_demarre,15);
    }

La dernière optimisation consiste en l'appel de la bonne méthode au moment voulu, c'est-à-dire qu'on peut faire correspondre chacune des étapes de l'animation à un temps donné, si on se base sur une certaine durée de l'animation. Ainsi, une étape trop longue ne ralentira pas les autres car le programme passera automatiquement à celle qui aurait du s'exécuter à l'instant T.

el_juky [Administrateur] le 18/05/2009

Citer