IE7/IE8 및 냉동 애니메이션 GIF

Question

나는 이것이 오래된 문제라고 확신합니다.

이것이 제가 애니메이션 GIF를 렌더링하는 방법입니다.

 <img id='loading' alt='loading' style="display: none; position:  
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />

이것이 내가 절실히 보여 주려고하는 방법입니다.

showLoading: function(gifId, butId) {
        var n = gifId != undefined ? gifId : 'loading';
        var l = $('#' + n);

        //if browser is stupid
        if ('v' == '\v') {
            var s = l.attr('src');
            var x = document.getElementById(n);
            x.style.visibility = "visible";
            x.style.display = "inline";
            setTimeout("document.getElementById('" + n + "').src = '"+s+"';",  
                        100);
        } else {
            l.show();
        }
        if (butId != undefined)
            $('#' + butId).css('cursor', 'default').attr("disabled", true);
    },

문제:애니메이션 GIF가 얼어 붙은 것처럼 보이며 애니메이션이 없습니다

가장 이상한 것은 다른 페이지에서 모든 것이 매력처럼 작동한다는 것입니다.

추신 : IE에 대해 울부 짖지 않는 것은 고통 스럽습니다 ... Argh ...

편집하다:

스팬으로 마무리 :

  <span id='loading' style='display: none;
                position: relative; left: 0px; top: 2px;'>
                <img alt='loading' src="<%= Url.Image("loading.gif") %>" />
            </span>

JS를 변경했습니다.

 if ('v' == '\v') {
            var f = function() {
                l.show();
                l.attr('src', l.attr('src'));
            };
            setTimeout(f, 100);
        } else {
            l.show();
        }

그리고 신비하게 - 그것은 지금 작동합니다.

Answer 1

나는 이것에 한 번 달려 갔다. 브라우저가로드하는 데 시간이 걸리는 페이지로 이동함에 따라 JavaScript를 사용하여 약간의로드 스포버를 표시하려고하면 GIF를 애니메이션하지 않을 것입니다. HIDDEN DIV에서 로딩 스로버를 HTML (JavaScript를 통해 삽입되지 않음)에 직접 넣어서 해결했습니다.

<div id="pseudo-progress-area" style="display: none;">
    <h3>Please wait while we process your PayPal transaction...</h3>
    <p style="text-align: center;">
        <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" />
    </p>
</div>

그런 다음 JavaScript를 사용하여 짧은 지연 후 DIV의 가시성을 전환합니다 (이것은 원형 버전의 프로토 타입 라이브러리를 사용하지만 아이디어를 얻는다).

<script type="text/javascript">    
    // We have to call this function via a setTimeout() or else IE7 won't
    // animate the GIF as the next page is loading.
    var fnHideConfirmation = function() {
        Element.hide( 'confirmation-area' );
        Element.show( 'pseudo-progress-area' );
    };    
</script>

해당 기능은 양식의 제출 버튼에 트리거됩니다.

<input 
    type="submit"
    class="button"
    name="SubmitConfirmation"
    value="Buy Now →"
    onclick="setTimeout(fnHideConfirmation, 50);" />

따라서 SRC 속성 변경을 지연시키는 대신 내버려두고 전체 showloading () 함수에 대한 호출을 지연시킵니다. 행운을 빕니다!

Answer 2

spin.js 이 유스 케이스에서 작동합니다.

Answer 3

이해하거나 구현하기가 약간 복잡한 대답을 발견했지만이 작업을 수행하는 동안 같은 문제가있었습니다.

나는 HTML을 따랐다

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
    <img src="images/progress_wheel.gif" style="margin-top: 204px;"/>
    <p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p>
</div>

그리고 Java 스크립트에서 나는 이것을하고 있었다

function onSubmit() {

   var divProgressWheel = document.getElementById("progress_wheel_div");
   divProgressWheel.style.display = "block";
}

그러나 그것은 GIF 파일을 애니메이션하는 것이 아니 었습니다.

솔루션

내 Java 스크립트를 업데이트하고 다음과 같이 만들었습니다

function onSubmit() {    
   setTimeout(showProgress, 500);
}

function showProgress() {

    var divProgressWheel = document.getElementById("progress_wheel_div");

    divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>";
    divProgressWheel.style.display = "block";
}

divprogresswheel.innerhtml은 내가 HTML에있는 것과 동일합니다. 거기서 우리는 불필요한 HTML을 제거 할 수 있으므로 수정 된 HTML이 될 수 있습니다.

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">

    </div>