Problème fluidité javascript déplacement d'une image

[Résolu]
Signaler
Messages postés
5
Date d'inscription
vendredi 3 avril 2009
Statut
Membre
Dernière intervention
28 avril 2010
-
Messages postés
5
Date d'inscription
vendredi 3 avril 2009
Statut
Membre
Dernière intervention
28 avril 2010
-
Bonjour à tous,

       J'espère déjà avoir posté mon message dans le bon forum.

       J'ai développer un petit script java pour une page d'accueil de site internet. Le principe est de voir en accueil une image de fond et un logo par-dessus, et lorsque l'on clique sur le logo ou au bout de 4secondes, l'image de fond se lève et le logo disparait par fondu. Ce script marche très bien sous ie7 ou safari, mais sous mozilla, l'image remonte très lentement et de façon  très saccadée et ne reste pas homogène. J'ai essayer de réduire la qualité des image en les mettant en .gif ( j'utilise des images .png 1680x1050 pour le fond et 2000x1000 pour le logo ) et en réduisant leur taille mais le problème ne disparait pas.

     Merci à ceux qui pourrait m'aider parce que je n'ai trouvé aucun témoignage similaire et commence à desespérer. Ou si vous connaissez une façon de le faire totalement compatible avec mozilla je suis preneur également.

     Voici le script :

<script type="text/javascript">

    var encours=false;
    var position = 0.0;
    var opacity = 100;
    var timer = null;
    var object1;
    var object2;
   
   
    function changeOpac( id ) {
   
    object2.style.opacity = (opacity / 100);
    object2.style.MozOpacity = (opacity / 100);
    object2.style.KhtmlOpacity = (opacity / 100);
    object2.style.filter = "alpha(opacity=" + opacity + ")";
    }

    function initPos() {
        var rid = document.getElementById("d21" );
        var logo = document.getElementById("d22" )
        rid.style.position = "absolute";
        rid.style.top = "0";
        rid.style.left = "0";
        logo.style.position = "absolute";
        logo.style.top = "20%";
        logo.style.left = "30%";
   }
 
   function MovePos(  ) {
       
        encours=true;

        object1.style.top = position+"ex";
       
        position-=2;
        opacity-=1.5;
       
        changeOpac( "d22" );

        if ( position <= -200 ){
         
            clearInterval(timer);
         
        }
       
       
    }
   
   
    function wait( i , time ){
   
        if (!(encours) ){initPos();}
        setTimeout( "MovePosWait( "+i+" )" , time );
   
    }
   
    function MovePosWait( i ){
   
        if ( !(encours)){
       
            object1 = document.getElementById("d21" );
            object2 = document.getElementById("d22" );
            timer = setInterval( "MovePos(  )" , 20 );

           
           
        }
   
   
    }
 
</script>

     Le code html :

       
       
       

       
       

       

      et le css :

#ecran{

    height: 100%;
    width: 100%;
   
}

#ecran img
        {
        position: absolute;
        height: 100%;
        width: 100%;
       
        }
       

#logoIntro img
        {
        position: absolute;
        height: 40%;
        width: 40%;
       
        }

2 réponses

Messages postés
5
Date d'inscription
vendredi 3 avril 2009
Statut
Membre
Dernière intervention
28 avril 2010

Je pense que je doit me résoudre à contre-cœur que Karma à raison, pusque cela signifie signifie que je vais sûrement devoir supprimé mon script de mon site, ou au pire ne le rendre accessible que pour les utilisateur de ie (ce qui à peu d'intérêt puisque la plupart des clients de mon site utilise mozilla)!
Merci en tout cas à ce qui ont tenté de m'aider!
 
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
24 juillet 2021
132
bonjour
 j'ai mois meme deja eu des problemes similaires avec ff 3 et je pense que c'est ff qui n'est pas tres performant au niveau des deplacements graphique je me rappel meme que ff 2 etait meilleur pour ce genre de choses meme bon je n'en suis pas certain a 100%