Анимированный GIF при загрузке страницы не анимируется - PullRequest
Новая
       44

Анимированный GIF при загрузке страницы не анимируется

4 голосов
/ 29 апреля 2011

У меня есть страница, которая генерируется на стороне сервера с использованием asp.net (C #). Загрузка страницы занимает некоторое время, так как в ней содержится до 100 фреймов. Я хочу показать анимированный GIF-файл «Пожалуйста, подождите» во время загрузки страницы, поэтому у меня есть следующее: 

<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">

Так что проблема в том, что загрузочный GIF не движется. Я пытался использовать 

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

тоже, и это заставило gif двигаться немного, но не так, как предполагалось.

Как сделать так, чтобы анимация была непрерывной во время загрузки?

Ответы [ 5 ]

12 голосов
/ 22 августа 2011

старый вопрос, но пост для коллег по Google:

Spin.js РАБОТАЕТ для этого варианта использования: http://fgnass.github.com/spin.js/

2 голосов
/ 04 июня 2011

Я получил похожую проблему и нашел довольно простое решение - моя разметка выглядит примерно так: 

<li><a href="#" onclick="this.parentNode.className = '_indicator'; doSomething();">Foo</a></li>

CSS-класс назначает анимированный gif фону этого li-элемента. Это прекрасно работает, но изображение не движется. Применение «focus ()» к li впоследствии решает это: 

<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
0 голосов
/ 20 июня 2012

Вы можете просто установить фоновое свойство CSS, чтобы оно содержало изображение gif, которое вы хотите отобразить во время анимации. 

background: rgba( 198, 226, 255, .5 ) 
                url('images/15.gif') 
                50% 50% 
                no-repeat;

.5 указывает на прозрачность;в части URL вы можете указать относительный или полный URL для вашего gif-изображения.

0 голосов
/ 09 августа 2011

вы пробовали setInterval()?setTimeout запускается только один раз, в то время как setInterval непрерывно работает до тех пор, пока не остановится. 

var x = setInterval(document.getElementById('loadinggif').src = 'graphics/loading.gif', 100);

... после завершения загрузки .... 

clearInterval(x);

хотя, теперь, когда я думаю об этом, всеваш код делает настройку источника изображения для анимированного GIF.реальная проблема заключается в том, что IE кажется «заблокированным» при выполнении большой обработки jScript в фоновом режиме и не запускает анимации.

вы можете попытаться сделать все анимационные картинки в анимации отдельными файлами, а затем использовать функцию interfval, чтобы изменить src для имитации той же анимации.

возможно, что-то вроде этого ... 

//global var
var imgIndex = 0;



var x = setInterval(changeImgSrc, 100);

... после завершения загрузки .... 

clearInterval(x);


function changeImgSrc(i){
document.getElementById('loadinggif').src = 'graphics/loading' + (imgIndex++) + '.gif'
}
0 голосов
/ 29 апреля 2011 
setTimeout(function(){document.getElementById('loadinggif').src = 'graphics/loading.gif'}, 100);

включите его в качестве функции и просмотрите ваши цитаты

Возможно, вы захотите сделать это следующим образом.Объявите src в html, но спрятайте его, затем выполните: 

setTimeout(
  function() {
    document.getElementById('loadinggif').style.display ='block';
       setTimeout(
          function() {
             document.getElementById('loadinggif').style.display = 'none';
          }, 100);
  }, 100);
...