Анимированный GIF в IE останавливается - PullRequest
108 голосов
/ 23 апреля 2009

Кто-нибудь знает, как сделать анимированные GIF-анимации по-прежнему анимированными после того, как вы нажмете ссылку или отправите форму на своей странице в IE? Это отлично работает в других браузерах.

Спасибо.

Ответы [ 16 ]

97 голосов
/ 15 декабря 2009

Принятое мной решение не сработало.

После еще одного исследования я наткнулся на этот обходной путь , и он действительно работает.

Вот суть этого:

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

и в вашем html:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

Поэтому, когда форма отправляется, вставляется тег <img/>, и по какой-то причине на него не влияют проблемы с анимацией.

Протестировано в Firefox, ie6, ie7 и ie8.

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

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

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

18 голосов
/ 23 апреля 2009

IE предполагает, что нажатие на ссылку предвещает новую навигацию, в которой содержимое текущей страницы будет заменено. Как часть процесса подготовки к этому, он останавливает код, который анимирует GIF-файлы. Я сомневаюсь, что с этим можно что-либо сделать (если только вы на самом деле не перемещаетесь, в этом случае используйте return false в событии onclick).

17 голосов
/ 24 января 2013

Вот jsFiddle, который отлично работает при отправке формы с method = "post". Спиннер добавляется в событие отправки формы.

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

См. Код jsFiddle здесь

Проверьте это в своем браузере IE здесь

8 голосов
/ 26 декабря 2013

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

Я был озадачен тем, что анимированные картинки не отображались в IE 10, а затем нашел этот драгоценный камень.

Инструменты & rarr; Свойства обозревателя & rarr; Дополнительно & rarr; MultiMedia & rarr; Воспроизведение анимации на веб-страницах

надеюсь, это поможет.

2 голосов
/ 07 января 2013

Я столкнулся с этой проблемой при попытке показать загрузочный GIF во время обработки отправки формы. У него был дополнительный уровень веселья в том, что тот же пользователь должен был запустить валидатор, чтобы убедиться, что форма верна. Как и все остальные (в каждой публикации формы IE / gif в Интернете), я не мог заставить спиннинг загрузки «крутиться» в IE (и, в моем случае, проверять / отправлять форму). Просматривая рекомендации на http://www.west -wind.com , я нашел сообщение от ev13wt, в котором говорилось, что проблема заключается в том, что «IE не отображает изображение как анимированное, потому что оно было невидимым, когда оно было оказываемый «. Это имело смысл. Его решение:

Оставьте пустым, где GIF будет идти, и используйте JavaScript для установки источника в функции onsubmit - document.getElementById ('loadingGif'). Src = "путь к файлу GIF".

Вот как я это реализовал:

<script type="text/javascript">
    function validateForm(form) {

        if (isNotEmptyid(form.A)) {
            if (isLen4(form.B)) {        
                if (isNotEmptydt(form.C)) {
                    if (isNumber(form.D)) {        
                        if (isLen6(form.E)){
                            if (isNotEmptynum(form.F)) {
                                if (isLen5(form.G)){
                                    document.getElementById('tabs').style.display = "none";                
                                    document.getElementById('dvloader').style.display = "block";                
                                    document.getElementById('loadingGif').src = "/images/ajax-loader.gif"; 
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
        }
        return false;   
    }               
</script>

<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
    <!-- FORM INPUTS... -->
    <input type="submit" name="submit" value=" Authorize ">

    <div style="display:none" id="dvloader">  
        <img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
        Working... this process may take several minutes.
    </div>

</form>

Это хорошо работает для меня во всех браузерах!

2 голосов
/ 29 января 2012

Вот что я сделал. Все, что вам нужно, это разбить ваш GIF, чтобы сказать 10 изображений (в данном случае я начал с 01.gif и закончил с 10.gif) и указать каталог, в котором вы их храните.

HTML:

<div id="tester"></div>

JavaScript:

function pad2(number) {   
    return (number < 10 ? '0' : '') + number 
}
var 
    dirURL = 'path/to/your/images/folder',
    ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
    jQuery('#tester').append(ajaxLoader);
    set(0);
});
function set(i) {
    if (i > 10) i = 1;    
    img.src = dirURL + pad2(i) + '.gif';
    setTimeout(function() {
        set(++i);
    }, 100);    
}

Этот метод работает с IE7, IE8 и IE9 (хотя для IE9 вы можете использовать spin.js). ПРИМЕЧАНИЕ: Я не проверял это в IE6, так как у меня нет машины, на которой запущен браузер 60-х годов, хотя метод настолько прост, что, вероятно, работает даже в IE6 и ниже.

1 голос
/ 20 ноября 2015

Нашел это решение на http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html и оно РАБОТАЕТ! Просто перезагрузите изображение, прежде чем установить на видимое. Вызовите следующую функцию Javascript с помощью нажатия кнопки:

function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}
1 голос
/ 15 октября 2013

Опираясь на ответ @danfolkes, это сработало для меня в IE 8 и ASP.NET MVC3.

В нашем _Layout.cshtml

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

<<< содержание здесь >>> ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

А в наших навигационных ссылках:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

или

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })
1 голос
/ 28 сентября 2010

В связи с этим мне пришлось искать исправление, в котором анимированные GIF-изображения использовались в качестве фонового изображения, чтобы обеспечить сохранение стиля в таблице стилей. У меня там тоже было похожее исправление ... мой скрипт работал примерно так (я использую jQuery, чтобы упростить получение вычисляемого стиля фона - как это сделать без jQuery - тема для другого сообщения):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[РЕДАКТИРОВАТЬ] С немного большим тестированием я только что понял, что это не работает с фоновыми изображениями в IE8. Я пробовал все, что мог придумать, чтобы IE8 отображал анимацию GIF, загружая страницу, но в настоящее время это не представляется возможным.

...