Анімований 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, тобто 6, тобто 7 і 8.

старе питання, але розміщуйте це для інших гуглерів:

Spin.js працює для цього випадку використання: http://fgnass.github.com/spin.js/

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

Ось jsFiddle, який працює чудово під час подання форми з методом = "повідомлення". Спінер додається при події надсилання форми.

$("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, і могла б допомогти іншим, хто прийшов на цю посаду, з подібною проблемою.

Мене здивувало те, як анімовані gif просто не відображаються в IE 10, а потім знайшов цей дорогоцінний камінь.

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

сподіваюся, що це допомагає.

Я зіткнувся з цією проблемою, намагаючись показати 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>

Це добре працювало для мене у всіх браузерах!

Ось що я зробив. Все, що вам потрібно, - це розбити свій 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 відтворила анімаційну анімацію, яка завантажує сторінку, але наразі це не представляється можливим.

Спираючись на відповідь @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 від натискання кнопки:

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's .load (); щоб завантажити та потім додати зображення.

Працює в IE 7+

Дуже дуже пізно відповісти на це, але я щойно виявив, що використання фонового зображення, кодованого як базовий 64 URI в CSS, а не утримується як окреме зображення, продовжує анімувати в IE8.

Дуже простий спосіб - використовувати плагін jQuery та SimpleModal . Тоді, коли мені потрібно буде показати свій "завантажувальний" gif при подачі, я роблю:

$('*').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(), я шукаю ці кнопки, переходжу до батьківського ФОРМУ кожного з них, і при подачі форми я запускаю 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)