IE7/IE8 и замороженные анимированные gifs

Question

Я совершенно уверен, что это старая проблема.

Это, как я сделать мой анимированный GIF:

<img id='loading' alt='loading' style="display: none; position: 
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" /> 

Это, как я отчаянно пытается показать это на данный момент:

showLoading: function(gifId, butId) { 
     var n = gifId != undefined ? gifId : 'loading'; 
     var l = $('#' + n); 

     //if browser is stupid 
     if ('v' == '\v') { 
      var s = l.attr('src'); 
      var x = document.getElementById(n); 
      x.style.visibility = "visible"; 
      x.style.display = "inline"; 
      setTimeout("document.getElementById('" + n + "').src = '"+s+"';", 
         100); 
     } else { 
      l.show(); 
     } 
     if (butId != undefined) 
      $('#' + butId).css('cursor', 'default').attr("disabled", true); 
    }, 

Проблема: появляется анимированного GIF замороженный, нет анимации

Странно, что на другой странице все работает как шарм.

P.s. это больно не разглагольствовать о IE ... Argh ...

EDIT:

обернутый вокруг пролетом:

<span id='loading' style='display: none; 
       position: relative; left: 0px; top: 2px;'> 
       <img alt='loading' src="<%= Url.Image("loading.gif") %>" /> 
      </span> 

изменил JS для:

if ('v' == '\v') { 
      var f = function() { 
       l.show(); 
       l.attr('src', l.attr('src')); 
      }; 
      setTimeout(f, 100); 
     } else { 
      l.show(); 
     } 

и мистически - теперь это работает.

Answer 1

Я столкнулся с этим однажды. Если я попытался использовать JavaScript, чтобы показать небольшую загрузку throbber, поскольку браузер переместился на страницу, на которую потребуется некоторое время, чтобы загрузить, IE не будет анимировать GIF. Я решил проблему, поставив загрузочную Throbber непосредственно в HTML (не вставляется через JavaScript) в скрытом DIV:

<div id="pseudo-progress-area" style="display: none;"> 
    <h3>Please wait while we process your PayPal transaction...</h3> 
    <p style="text-align: center;"> 
     <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" /> 
    </p> 
</div> 

, а затем с помощью JavaScript, чтобы переключить видимость DIV после короткой задержки (это используя старая версия библиотеки Prototype, но вы получите идею):

<script type="text/javascript">  
    // We have to call this function via a setTimeout() or else IE7 won't 
    // animate the GIF as the next page is loading. 
    var fnHideConfirmation = function() { 
     Element.hide('confirmation-area'); 
     Element.show('pseudo-progress-area'); 
    };  
</script> 

Эта функция вызывается в кнопке формы Передать:

<input 
    type="submit" 
    class="button" 
    name="SubmitConfirmation" 
    value="Buy Now →" 
    onclick="setTimeout(fnHideConfirmation, 50);" /> 

Так вместо задерживая т он изменит атрибут src, оставьте его в покое и просто задержите вызов всей вашей функции showLoading(). Удачи!

Answer 2

Spin.js работает для этого прецедента.

Answer 3

Я нашел принятый ответ немного сложно понять или осуществить, однако я была такая же проблема, делая это,

я следующий HTML

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;"> 
    <img src="images/progress_wheel.gif" style="margin-top: 204px;"/> 
    <p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p> 
</div> 

и в Java Script я делал это

function onSubmit() { 

    var divProgressWheel = document.getElementById("progress_wheel_div"); 
    divProgressWheel.style.display = "block"; 
} 

Но это не анимировать файл GIF,

Solutions

Обновленный мой Java-скрипт, и сделал это как следующий

function onSubmit() {  
    setTimeout(showProgress, 500); 
} 

function showProgress() { 

    var divProgressWheel = document.getElementById("progress_wheel_div"); 

    divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>"; 
    divProgressWheel.style.display = "block"; 
} 

пожалуйста, обратите внимание, что divProgressWheel.innerHTML такое же, как то, что я имел в HTML. Там мы можем удалить ненужный html так, чтобы измененный html был;

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;"> 

    </div>