IE'de animasyonlu GIF durduruluyor

IE'de bulunduğunuz sayfada bir bağlantıya tıkladıktan veya bir form gönderdikten sonra animasyonlu GIF'lerin canlandırılmaya devam etmesini sağlayacak bir çalışma ortamı bilen var mı? Bu, diğer tarayıcılarda iyi çalışıyor.

Teşekkürler.

Kabul edilen çözüm benim için işe yaramadı.

Biraz daha araştırmadan sonra bu geçici çözümle karşılaştım ve aslında işe yarıyor.

İşte işin özü:

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

ve html'nizde:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

Dolayısıyla form gönderildiğinde <img/>etiket eklenir ve herhangi bir nedenle ie animasyon sorunlarından etkilenmez.

Firefox, ie6, ie7 ve ie8'de test edilmiştir.

eski soru, ancak bunu Google çalışanları için yayınlamak:

Spin.js, bu kullanım örneği için ÇALIŞIR: http://fgnass.github.com/spin.js/

IE, bir bağlantının tıklanmasının mevcut sayfa içeriklerinin değiştirileceği yeni bir navigasyonu müjdelediğini varsayar. Bunun için hazırlık sürecinin bir parçası olarak, GIF'leri canlandıran kodu durdurur. Bununla ilgili yapabileceğiniz herhangi bir şey olduğundan şüpheliyim (gerçekten gezinmiyorsanız, bu durumda onclick olayında return false kullanın).

İşte method = "post" ile form gönderimi üzerinde gayet iyi çalışan bir jsFiddle. Değer değiştirici, form gönderme olayına eklenir.

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

JsFiddle kodunu burada görün

IE tarayıcınızda burada test edin

Bu gönderiye geldim ve daha önce yanıtlanmış olsa da, IE 10'a özgü bu sorunda bana yardımcı olacak bazı bilgileri göndermem gerektiğini hissettim ve bu gönderiye benzer bir sorunla gelen diğerlerine yardımcı olabilirim.

Animasyonlu GIF'lerin IE 10'da gösterilmemesi ve sonra bu mücevheri bulması beni şaşırttı.

Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages

Bu yardımcı olur umarım.

Bir form gönderimi işlenirken bir yükleme gif'i göstermeye çalışırken bu sorunla karşılaştım. Formun doğru olduğundan emin olmak için aynı gönderme işleminin bir doğrulayıcı çalıştırması gerektiğinden, ek bir eğlence katmanı vardı. Herkes gibi (internetteki her IE / gif formu gönderisinde) IE'de yükleme döndürücüsünü "döndürmeye" alamadım (ve benim durumumda formu doğruladım / gönderdim). Http://www.west-wind.com adresindeki tavsiyelere bakarken, ev13wt tarafından yazılan ve sorunun "... IE'nin görüntüyü animasyonlu olarak işlemediğini çünkü görüntülendiğinde görünmez olduğunu belirten bir gönderi buldum. " Bu mantıklıydı. Çözümü:

Gif'in gideceği yeri boş bırakın ve onsubmit işlevinde kaynağı ayarlamak için JavaScript'i kullanın - document.getElementById ('loadingGif'). Src = "gif dosyasına giden yol".

İşte bunu nasıl uyguladım:

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

Bu, tüm tarayıcılarda benim için iyi çalıştı!

İşte yaptığım şey. Tek yapmanız gereken, 10 resim (bu durumda başladım 01.gifve bitirdim 10.gif) demek için GIF'inizi bölmek ve onları sakladığınız dizini belirtmektir.

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);    
}

Bu yöntem IE7, IE8 ve IE9 ile çalışır (her ne kadar IE9 için de kullanabilirsiniz spin.js). NOT: Bunu IE6'da test etmedim çünkü 60'lardan kalma bir tarayıcı çalıştıran bir makinem yok, ancak yöntem o kadar basit ki muhtemelen IE6 ve daha düşük sürümlerde bile çalışıyor.

Bununla ilgili olarak, stilin stil sayfasında tutulmasını sağlamak için animasyonlu giflerin arka plan görüntüsü olarak kullanıldığı bir düzeltme bulmam gerekiyordu. Benim için de benzer bir düzeltme benim için çalıştı ... betiğim şöyle bir şey oldu (hesaplanan arka plan stilini elde etmeyi kolaylaştırmak için jQuery kullanıyorum - jQuery olmadan bunu nasıl yapacağım başka bir gönderi konusu):

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

[DÜZENLE] Biraz daha testle bunun IE8'deki arka plan görüntülerinde işe yaramadığını fark ettim. IE8'in bir sayfayı yüklerken bir gif animasyonu oluşturmasını sağlamak için düşünebildiğim her şeyi deniyorum, ancak şu anda mümkün görünmüyor.

@ Danfolkes'in cevabına dayanarak, bu benim için IE 8 ve ASP.NET MVC3'te çalıştı.

_Layout.cshtml’de

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

<<< içerik burada >>> ...

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

Ve navigasyon bağlantılarımızda:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

veya

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })

Bu çözümü http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html adresinde buldum ve ÇALIŞIYOR! Görünür olarak ayarlamadan önce resmi yeniden yüklemeniz yeterlidir. Düğmenizin onclick ile aşağıdaki Javascript işlevini çağırın:

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';
}

Bunun eski bir soru olduğunu ve şimdiye kadar orijinal posterlerin her birinin kendilerine uygun bir çözüm bulduklarının farkındayım, ancak bu sorunla karşılaştım ve VML etiketlerinin bu IE hatasına kurban gitmediğini gördüm. Hareketli GIF'ler, VML etiketleri kullanılarak IE tarayıcısına yerleştirildiklerinde sayfa kaldırılırken hala hareket eder.

Dikkat edin VML etiketlerini kullanmaya karar vermeden önce VML'yi tespit ettim, bu yüzden bu FireFox'ta ve normal animasyonlu GIF davranışını kullanan diğer tarayıcılarda çalışıyor.

İşte bunu nasıl çözdüm.

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

Doğal olarak, bu jQuery, jQueryUI'ye dayanır ve bir tür animasyonlu GIF gerektirir ("/images/loading_gray.gif").

jQuery:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Az önce benzer bir sorun yaşadım. Bunlar benim için mükemmel çalıştı.

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

Başka bir fikir jQuery'nin .load () kullanmaktı; görüntüyü yüklemek ve sonra başa eklemek için.

IE 7+ ile çalışır

Bunu yanıtlamak için çok, çok geç, ancak ayrı bir görüntü olarak tutulmak yerine CSS'de bir base64 URI olarak kodlanmış bir arka plan görüntüsü kullanmanın IE8'de canlandırmaya devam ettiğini keşfettim.

Çok kolay bir yol, jQuery ve SimpleModal eklentisini kullanmaktır . Gönderme sırasında "yükleniyor" gifimi göstermem gerektiğinde, şunu yapıyorum:

$('*').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 gibi diğer borçlularda da ortak olan aynı sorunu yaşadım. Sonunda, form gönderme sırasında içinde hareketli gif bulunan bir öğeyi dinamik olarak oluşturmanın canlandırılmadığını keşfettim, bu yüzden aşağıdaki çalışma biçimini geliştirdim.

1) document.ready()Sayfada bulunan her bir FORM'da position:relativemülk alın ve ardından her birine görünmez bir şekilde eklenir DIV.bg-overlay.

2) Bundan sonra, web sitemin her gönderim değerinin btn-primarycss sınıfı ile tanımlandığını varsayarak , yine de document.ready()bu düğmeleri ararım, her birinin FORM ebeveynine gidip form gönderme sırasında showOverlayOnFormExecution(this,true);işlevi ateşler , tıklanan düğmeyi geçerek ve görünürlüğünü değiştiren bir boole 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şu şekildedir:

.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) Herhangi bir form gönderimi sırasında, aşağıdaki işlev, üzerinde yarı beyaz bir arka plan kaplaması (formla tekrar etkileşime girme yeteneğini reddeden) ve içinde animasyonlu bir gif (görsel olarak bir yükleme eylemini gösteren) göstermek için çalıştırılır.

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();
}

Form gönderme sırasında animasyonlu gif'i bu etkinliğe eklemek yerine göstermek, çeşitli tarayıcıların "gif animasyon donması" sorununu çözüyor (söylendiği gibi, bu sorunu Chrome'da değil IE ve Firefox'ta buldum)