IE의 애니메이션 GIF 중지

링크를 클릭하거나 IE의 페이지에서 양식을 제출 한 후에도 애니메이션 GIF가 계속 애니메이션되도록 만드는 방법을 아는 사람이 있습니까? 이것은 다른 브라우저에서 잘 작동합니다.

감사.

허용 된 솔루션이 저에게 효과적이지 않았습니다.

더 많은 조사를 한 후에이 해결 방법 을 발견했으며 실제로 작동합니다.

그 요점은 다음과 같습니다.

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에서 테스트되었습니다.

오래된 질문이지만 동료 Google 직원을 위해 다음을 게시하십시오.

Spin.js는이 사용 사례에서 작동합니다 : http://fgnass.github.com/spin.js/

IE는 링크를 클릭하면 현재 페이지 내용이 대체 될 새로운 탐색이 시작된다고 가정합니다. 이를 확인하는 프로세스의 일부로 GIF 애니메이션 코드를 중지합니다. 나는 당신이 그것에 대해 할 수있는 일이 없을 것입니다 (실제로 onclick 이벤트에서 false를 반환하는 경우를 탐색하지 않는 한).

다음은 method = "post"로 양식 제출시 잘 작동하는 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에만 해당되는이 문제를 해결하는 데 도움이되는 정보를 게시해야하며 비슷한 문제로이 게시물에 도착하는 다른 사람들에게 도움이 될 수 있다고 생각했습니다.

IE 10에서 애니메이션 GIF가 표시되지 않는 방식에 당황해서이 보석을 발견했습니다.

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>

자바 스크립트 :

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). 참고 : 60 년대부터 브라우저를 실행하는 컴퓨터가 없기 때문에 IE6에서 테스트하지 않았습니다. 방법이 너무 간단해서 IE6 이하에서도 작동 할 수 있습니다.

이와 관련하여 스타일 시트에 스타일이 유지되도록 애니메이션 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 애니메이션을 렌더링하도록 생각할 수있는 모든 것을 시도해 왔지만 지금은 불가능 해 보입니다.

@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 에서 찾았 으며 작동합니다! 표시로 설정하기 전에 이미지를 다시로드하기 만하면됩니다. 버튼의 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 버그의 희생양이되지 않음을 발견했습니다. VML 태그를 사용하여 IE 브라우저에 배치하면 애니메이션 GIF가 페이지 언로드 중에 계속 이동합니다.

VML 태그를 사용하기로 결정하기 전에 먼저 VML을 감지 했으므로 일반적인 애니메이션 GIF 동작을 사용하는 FireFox 및 기타 브라우저에서 작동합니다.

이 문제를 해결 한 방법은 다음과 같습니다.

<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 이상에서 작동

이 질문에 답하기에는 아주 늦었지만 CSS에서 base64 URI로 인코딩 된 배경 이미지를 별도의 이미지로 유지하는 대신 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()에서 페이지에서 찾은 각 FORM은 position:relative속성을 수신 한 다음 각 FORM 에 보이지 않는 DIV.bg-overlay.

2) 그 후 내 웹 사이트의 각 제출 값이 btn-primarycss 클래스 로 식별된다고 가정하고 다시 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 애니메이션 정지"문제가 해결 됩니다 (말했듯이 Chrome이 아닌 IE 및 Firefox에서이 문제를 발견했습니다).