IE7/IE8 و المجمدة صور متحركة

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 المتحركة يظهر المجمدة ، لا يوجد الرسوم المتحركة

أغرب شيء هو أن على صفحة أخرى كل شيء يعمل مثل السحر.

P. s.انها مؤلمة لا خرف عن أي...أرج...

تحرير:

ملفوفة حول مع span:

  <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

ركضت إلى هذه مرة واحدة.إذا حاولت استخدام جافا سكريبت لإظهار القليل من التحميل نابض المتصفح انتقل إلى الصفحة التي كنت سوف يستغرق بعض الوقت لتحميل ، أي لن تحريك GIF.وأنا حلها عن طريق وضع التحميل نابض مباشرة إلى HTML (لا تدخل عن طريق جافا سكريبت) في خفية div:

<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>

ثم باستخدام جافا سكريبت إلى تبديل وضوح 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>

و في جافا سكريبت كنت تفعل هذا

function onSubmit() {

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

لكنه لم يكن موحية gif الملف ،

حلول

تحديث java script و جعله مثل التالية

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>