Анимированный GIF в IE останавливается - PullRequest
Новая
       104

Анимированный GIF в IE останавливается

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

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

Спасибо.

Ответы [ 16 ]

0 голосов
/ 28 марта 2017

Очень простой способ - использовать jQuery и SimpleModal plugin . Затем, когда мне нужно показать мой «загружающий» 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} );
0 голосов
/ 02 февраля 2015

У меня была такая же проблема, распространенная и в других браузерах, таких как 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 )

0 голосов
/ 03 декабря 2013

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

0 голосов
/ 10 января 2013

Просто была похожая проблема. Это прекрасно сработало для меня. 

$('#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 +

0 голосов
/ 02 июля 2012

Jquery: 

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
0 голосов
/ 28 февраля 2012

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

Страница:
...