IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

[SRC] Preloader XHTML en Javascript


Sujet :

Contribuez

  1. #1
    Membre régulier
    Homme Profil pro
    Datascientist
    Inscrit en
    Août 2008
    Messages
    248
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Datascientist
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 248
    Points : 110
    Points
    110
    Par défaut [SRC] Preloader XHTML en Javascript
    bonjour j'ai trouvé et testé ce script sur le preloader qui marche bien,

    Le “preloader” affiche une image gif animé pendant le chargement ,
    Voici le code javascript de ce Preloader.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <script type="text/javascript">
    // Vous pouvez changer la vitesse (speed) (1 == tres rapide)
    // Vous pouvez changer la qualité de la transition (1 == best)
    // Plus la transition est de qualité, plus la rapidité ralenti et doit être augmenté
    var speed = 10; 
    var transition = 10;
     
    // Dimensions du preloader en GIF animé
    var GIFpreloadLargeur = 20;
    var GIFpreloadHauteur = 20;
     
    var timer= 0;
    var opaciT = 100; 
     
    function opacity() 
    { 
        opaciT = opaciT - transition;
     
        var object = document.getElementById("preloader").style; 
        object.opacity = (opaciT / 100); 
        object.MozOpacity = (opaciT / 100); 
        object.KhtmlOpacity = (opaciT / 100); 
        object.filter = "alpha(opacity=" + opaciT + ")"; 
     
         if (opaciT <= 0)
         {
              document.getElementById("preloader").style.visibility="hidden";
              clearInterval(timer);
         }
     
    }
     
    function preload() 
    { 
         if (document.getElementById) 
         {
              document.getElementById("preloadIMG").style.visibility="hidden";
              timer = setInterval("opacity()",speed);
         }
     
         else 
         {
              if (document.layers) 
              {    
                   document.preloadIMG.visibility = "hidden";
                   timer = setInterval("opacity()",speed);
             } 
                 else 
              {
                   document.all.preloadIMG.style.visibility = "hidden";
                   timer = setInterval("opacity()",speed);
              } 
         }
    }
     
    // GÉNÉRER LE CSS POUR LE PRELOADER
    var myCSS;
    myCSS = "<style type=\"text/css\">";
     
    myCSS += "html, body { height:auto; margin:0px; padding:0px;}";
     
    myCSS += "#preloader {";
    myCSS += "position:fixed;";
    myCSS += "background-color:white;";
    myCSS += "width:100%;";
    myCSS += "height:100%; ";
    myCSS += "display:block;";
    myCSS += "z-index:100000;";
    myCSS += "}";
     
    myCSS += "#preloadIMG {";
    myCSS += "position:absolute;";
    myCSS += "left:50%;";
    myCSS += "width:" + GIFpreloadLargeur + "px;";
    myCSS += "height:" + GIFpreloadHauteur + "px;";
    myCSS += "margin-left:-" + (GIFpreloadLargeur / 2) + "px;";
    myCSS += "top:150px;";
    myCSS += "}";
     
    myCSS += "</style>";
     
    // ÉCRITURE DES CSS
    window.document.write(myCSS);
     
    // ÉXÉCUTION
    window.onload = function() { preload(); }
     
     
    </script>
    Le code juste après la balise Body

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="preloader"><div id="preloadIMG"><img src="loading.gif" alt="" /></div></div>

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    code assez moyen , utile , mais pas très propre , ne serais ce que par :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.document.write(myCSS);
    de plus on ne peut utiliser la fonction qu'une fois en même temps car elle utilise une div unique ...

    mais l'intention était la

  3. #3
    Nouveau Candidat au Club
    Profil pro
    Inscrit en
    Juillet 2009
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2009
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    bonjour j'aurai voulu modifié ce script pour qu'il se disparaissent a un temps voulu, pourriez vous m'aidez?

Discussions similaires

  1. Xml, Xslt, Xhtml et Javascript ?
    Par Clad3 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/07/2006, 15h18
  2. [XHTML] XHTML et Javascript
    Par cerede2000 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 13/04/2006, 10h42
  3. [W3C] Pb validation XHTML et javascript
    Par jerome38000 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 15/12/2005, 15h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo