Остановка анимированного GIF в IE

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

Спасибо.

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

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

Вот его суть:

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.

старый вопрос, но публикуем это для других гуглеров:

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

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

Вот 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 здесь

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

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

Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages

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

Я столкнулся с этой проблемой при попытке показать загружаемый gif во время обработки отправки формы. Это было еще более забавно, так как тот же onsubmit должен был запустить валидатор, чтобы убедиться, что форма верна. Как и все остальные (в каждом сообщении формы 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>

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

Вот что я сделал. Все, что вам нужно, это разбить ваш 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 и ниже.

В связи с этим мне пришлось найти исправление, при котором анимированные гифки использовались в качестве фонового изображения, чтобы обеспечить сохранение стиля в таблице стилей. Подобное исправление сработало и у меня ... мой сценарий выглядел примерно так (я использую 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;
}

[EDIT] Пройдя немного больше тестирования, я только что понял, что это не работает с фоновыми изображениями в IE8. Я пробовал все, что мог придумать, чтобы IE8 отображал gif-анимацию при загрузке страницы, но в настоящее время это кажется невозможным.

Основываясь на ответе @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()" })

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

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';
}

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

Обратите внимание, что я обнаружил VML прежде, чем принял решение использовать теги VML, поэтому он работает в FireFox и других браузерах, использующих обычное поведение анимированного GIF.

Вот как я это решил.

<input class="myExitButton" type="button" value="Click me"  />

<div class="loadingNextPage" style="display:none" >
    <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
    <img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
    <div>Just one moment while we access this information...</div>
</div>

<script language="javascript" type="text/javascript">
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            var supported = b ? typeof b.adj == "object" : true;
            a.parentNode.removeChild(a);
            return supported;
        };

        var showAnimationDuringPageUnload = function () {
            if (isVmlSupported()) {
                $(".loadingNextPage > .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage > .spinnerImageVml").hide();
            }
        };

        var openLoadingMessage = function () {
            $(".loadingNextPage").dialog({
                modal: true,
                closeOnEscape: true,
                title: 'Please wait...',
                closeText: 'x',
                height: getdialogHeight(200),
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

        $('.myExitButton').click(function () {
            openLoadingMessage();
            showAnimationDuringPageUnload();
            window.location.href = 'http://www.stackoverflow.com';
        });


        return progress;
    })(window.LoadProgress || {}, window.jQuery);
</script>

Естественно, это зависит от jQuery, jQueryUI и требует анимированного GIF определенного типа ("/images/loading_gray.gif").

JQuery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Просто была аналогичная проблема. Это отлично сработало для меня.

$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');

$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');

Другая идея заключалась в использовании jQuery .load (); чтобы загрузить, а затем добавить изображение.

Работает в IE 7+

Очень, очень поздно отвечать на этот вопрос, но я только что обнаружил, что использование фонового изображения, которое закодировано как URI base64 в CSS, а не хранится как отдельное изображение, продолжает анимироваться в IE8.

Очень простой способ - использовать jQuery и плагин SimpleModal . Затем, когда мне нужно показать мою "загружающуюся" гифку при отправке, я делаю:

$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );

У меня была та же проблема, которая характерна и для других браузеров, таких как Firefox. Наконец я обнаружил, что динамическое создание элемента с анимированным gif внутри при отправке формы не анимируется, поэтому я разработал следующий рабочий цикл.

1) document.ready()Каждая ФОРМА, найденная на странице, получает position:relativeсвойство, а затем к каждой из них прикрепляется невидимое DIV.bg-overlay.

2) После этого, предполагая, что каждое значение отправки моего веб-сайта идентифицируется btn-primaryклассом css, я снова document.ready()ищу эти кнопки, перехожу к родительскому элементу FORM каждого из них, а при отправке формы я запускаю showOverlayOnFormExecution(this,true);функцию, передавая нажатую кнопку и логическое значение, которое переключает видимость DIV.bg-overlay.

$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});

CSS для DIV.bg-overlayследующего:

.bg-overlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,0.6);
  z-index:100;
}

.bg-overlay img
{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
  margin-top:-40px;
  max-width:auto;
  max-height:80px;
}

3) При отправке любой формы запускается следующая функция, чтобы показать наложенный на нее полу-белый фон (который лишает возможности снова взаимодействовать с формой) и анимированный gif внутри него (который визуально показывает действие загрузки).

function showOverlayOnFormExecution(clicked_button, showOrNot) 
{
    if(showOrNot == 1)
    {
        //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button 
        $(clicked_button).closest('form').find('.bg-overlay').show();
    }
    else
        $('form .bg-overlay').hide();
}

Отображение анимированного gif при отправке формы вместо добавления его в это событие решает проблему «зависания анимации gif» в различных браузерах (как уже говорилось, я обнаружил эту проблему в IE и Firefox, а не в Chrome)