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, ie7 และ ie8

คำถามเก่า แต่โพสต์สำหรับเพื่อน Googler:

Spin.js ทำงานสำหรับกรณีการใช้งานนี้: http://fgnass.github.com/spin.js/

IE จะถือว่าการคลิกลิงก์เป็นการประกาศการนำทางใหม่ที่เนื้อหาของหน้าปัจจุบันจะถูกแทนที่ เป็นส่วนหนึ่งของกระบวนการในการมองเห็นว่ามันจะหยุดโค้ดที่ทำให้ GIF เคลื่อนไหว ฉันสงสัยว่ามีอะไรที่คุณสามารถทำได้ (เว้นแต่คุณจะไม่ได้นำทางจริง ๆ ซึ่งในกรณีนี้ให้ใช้ return false ในเหตุการณ์ onclick)

นี่คือ jsFiddle ที่ใช้งานได้ดีกับการส่งแบบฟอร์มด้วย method = "post" มีการเพิ่มสปินเนอร์ในเหตุการณ์การส่งแบบฟอร์ม

$("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 ที่กำลังโหลดในขณะที่กำลังดำเนินการส่งแบบฟอร์ม มันมีชั้นของความสนุกที่เพิ่มเข้ามาโดยที่ onsubmit เดียวกันต้องเรียกใช้ตัวตรวจสอบความถูกต้องเพื่อให้แน่ใจว่าแบบฟอร์มนั้นถูกต้อง เช่นเดียวกับคนอื่น ๆ (ในทุกโพสต์แบบฟอร์ม IE / gif บนอินเทอร์เน็ต) ฉันไม่สามารถโหลดสปินเนอร์เพื่อ "หมุน" ใน IE ได้ (และในกรณีของฉันตรวจสอบความถูกต้อง / ส่งแบบฟอร์ม) ในขณะที่ดูคำแนะนำในhttp://www.west-wind.comฉันพบโพสต์ของ ev13wt ที่แนะนำปัญหาคือ "... IE ไม่แสดงภาพเป็นภาพเคลื่อนไหวเนื่องจากไม่สามารถมองเห็นได้เมื่อมีการแสดงผล " ที่สมเหตุสมผล วิธีแก้ปัญหาของเขา:

เว้นว่างไว้ในตำแหน่งที่ GIF จะไปและใช้ JavaScript เพื่อตั้งค่าซอร์สในฟังก์ชัน onsubmit - document.getElementById ('loadingGif'). src = "path to gif file"

นี่คือวิธีที่ฉันใช้งาน:

<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 และต่ำกว่า

เกี่ยวกับสิ่งนี้ฉันต้องหาวิธีแก้ไขที่ใช้ 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-animate-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');

อีกแนวคิดหนึ่งคือการใช้ .load () ของ jQuery; เพื่อโหลดแล้วนำหน้ารูปภาพ

ทำงานใน IE 7+

ช้ามากที่จะตอบคำถามนี้ แต่ฉันเพิ่งค้นพบว่าการใช้ภาพพื้นหลังที่เข้ารหัสเป็น URI ฐาน 64 ใน 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 แบบเคลื่อนไหวภายในที่ส่งแบบฟอร์มไม่เคลื่อนไหวดังนั้นฉันจึงพัฒนา workaorund ต่อไปนี้

1) ในdocument.ready()แต่ละรูปแบบที่พบในหน้ารับทรัพย์สินและแล้วแต่ละคนมีการแนบที่มองไม่เห็นposition:relativeDIV.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)