IE7/IE8 и замороженные анимированные GIF-изображения

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...ааа...

РЕДАКТИРОВАТЬ:

Обернутый с помощью span:

  <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, чтобы показать небольшой сигнал загрузки при переходе браузера на страницу, загрузка которой должна была занять некоторое время, IE не анимировал бы GIF.Я решил это, поместив сигнализатор загрузки непосредственно в 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 после небольшой задержки (при этом используется более старая версия библиотеки прототипов, но вы поняли):

<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

Спин.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-скрипте я делал это

function onSubmit() {

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

Но это был не анимационный gif-файл,

Решения

Обновил мой 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>