GIF animé pendant le chargement de la page ne s'anime pas

J'ai une page qui est généré à l'aide de serverside asp.net (C#). Il faut un certain temps pour que la page se charge, comme elle l'a jusqu'à 100 iframes. Je veux montrer une "veuillez patienter" gif animé pendant le chargement de la page, j'ai donc le suivant:

<style type="text/css">
    #blackout
    {
       filter:alpha(opacity=70); 
       -moz-opacity:0.7; 
       opacity:0.7; 
       position:absolute;
       background-color:#222233;
       z-index:50; 
       left:0px;
       top:0px;
       right:0px;
       bottom:0px;
       width:102%;
       height:102%;
    }
    #loading
    {
       filter:alpha(opacity=100); 
       -moz-opacity:1; 
       opacity:1; 
        position:fixed;
        text-align:center;
        background-color:#EEEEEE;
        top:50%;
        left:50%;
        margin-top:-55px;
        margin-left:-75px;
        width:150px;
        height:75px;
        z-index:100; 
    }
    </style>
</head>
<body onload="document.getElementById('loading').style.visibility='hidden';document.getElementById('loading').style.display='none';document.getElementById('blackout').style.visibility='hidden';document.getElementById('blackout').style.display='none';">
    <div id="blackout">
        <div id="loading"><img id="loadinggif" src="graphics/loading.gif" alt="" style="margin-top:12px; "/><br />Please wait...</div>
        <script type="text/javascript" language="javascript">
            document.getElementById('loadinggif').src = 'graphics/loading.gif';
        </script>
    </div>
    <form id="form1" runat="server">

Donc, le problème est que le chargement gif n'est pas en mouvement. J'ai essayé d'utiliser

setTimeout("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100);

trop, et il a fait le gif bouger "un peu", mais pas comme prévu.

Comment puis-je faire animer des nations unies s'est interrompue au cours de la charge?

OriginalL'auteur Jesper | 2011-04-29

12

vieille question, mais la publication de cette pour les autres googlers:

Spin.js fonctionne pour ce cas d'utilisation:
http://fgnass.github.com/spin.js/

OriginalL'auteur Entendu
2

J'ai eu un problème similaire et a trouvé une jolie solution facile - balisage ressemble un peu à ceci:
```
<li><a href="#" onclick="this.parentNode.className = '_indicator'; doSomething();">Foo</a></li>
```
La Classe CSS est l'attribution d'un gif animé à l'arrière-plan de cette li-élément. Cela fonctionne très bien, mais l'image n'est pas en mouvement. L'application "focus()" à la li par la suite résout ce:
```
<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
```
OriginalL'auteur Nikolas
0
```
setTimeout(function(){document.getElementById('loadinggif').src = 'graphics/loading.gif'}, 100);
```
l'inclure comme une fonction et de regarder vos citations

Vous pouvez le faire comme cela. Déclarer la src dans le code html mais il a de caché, puis effectuer:
```
setTimeout(
  function() {
    document.getElementById('loadinggif').style.display ='block';
       setTimeout(
          function() {
             document.getElementById('loadinggif').style.display = 'none';
          }, 100);
  }, 100);
```
Merci pour votre réponse. La première solution donne le même résultat que codesetTimeout("document.getElementById ("loadinggif').src = 'graphics/loading.gif'", 100); Il fonctionne dans firefox, mais sous IE, il ne se déplace d'un cran maintenant et puis. Deuxième suggestion n'indique pas de gif. Je sais que c'est un problème IE, mais je me demandais si il existe un moyen de rendre l'animation de tout les temps dans IE comme il le fait dans la FF.
pouvez-vous lien gif?
J'utilise celui-ci: http://epc.inet4.com/images/dialog/loading.gif
La seule chose que je peux penser, c'est que la modification de la src ou dynamique ayant de l'élément de commencer avec display = none, c'est qu'il est à la charge de l'image lors de l'exécution de cette commande.. peut-être c'est à dire est buggy avec l'enregistrement de l'image après tous les a rendus? essayez de faire visiblity = masqué et de la rendre visible, qui aura le gif chargé avec le render
Après quelques tests, il semble que IE est tout simplement trop occupés avec d'autres choses de soins sur l'animation gifs lors du chargement de contenu 🙂 Donc je vais juste vous montrer un non-animé sablier, ha ha...

OriginalL'auteur Atticus
0

avez-vous essayé setInterval()? setTimeout ne s'exécute une fois, tout setInterval est exécutée en continu jusqu'à l'arrêt.
```
var x = setInterval(document.getElementById('loadinggif').src = 'graphics/loading.gif', 100);
```
... quand fini de se charger ....
```
clearInterval(x);
```
bien que, maintenant que j'y pense, tout le code est en train de faire est de définir la source de l'image pour le gif animé. le vrai problème est que IE semble être "verrouillé" quand on fait beaucoup de jScript traitement en arrière-plan et n'a pas d'exécuter des animations.

vous pourriez essayer d'avoir tous les gif dans l'animation en tant que fichiers séparés et ensuite utiliser le interfval fonction pour modifier la src pour imiter la même animation.

peut-être somehting comme ça...
```
//global var
var imgIndex = 0;



var x = setInterval(changeImgSrc, 100);
```
... quand fini de se charger ....
```
clearInterval(x);


function changeImgSrc(i){
document.getElementById('loadinggif').src = 'graphics/loading' + (imgIndex++) + '.gif'
}
```
OriginalL'auteur Remus
0

Vous pouvez simplement mettre en fond d'une propriété CSS pour contenir l'image gif u souhaitez afficher au cours de l'animation.
```
background: rgba( 198, 226, 255, .5 ) 
                url('images/15.gif') 
                50% 50% 
                no-repeat;
```
.5 indique l'opacité;
dans l'URL, vous pouvez les donner relative ou l'URL complète de votre image gif.

OriginalL'auteur Ankit

Vous devez vous connecter pour publier un commentaire.