GIF animasi di IE berhenti

Adakah yang tahu cara bekerja untuk membuat animasi GIF itu terus dianimasikan setelah Anda mengklik link atau mengirimkan formulir di halaman Anda di IE? Ini berfungsi dengan baik di browser lain.

Terima kasih.

Solusi yang diterima tidak berhasil untuk saya.

Setelah beberapa penelitian lebih lanjut, saya menemukan solusi ini , dan itu benar-benar berhasil.

Inilah intinya:

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

dan di html Anda:

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

Jadi ketika formulir dikirimkan, <img/>tag dimasukkan, dan untuk beberapa alasan itu tidak terpengaruh oleh masalah animasi ie.

Diuji di Firefox, ie6, ie7 dan ie8.

pertanyaan lama, tapi posting ini untuk sesama karyawan Google:

Spin.js BEKERJA untuk kasus penggunaan ini: http://fgnass.github.com/spin.js/

IE mengasumsikan bahwa mengklik tautan menandai navigasi baru di mana konten halaman saat ini akan diganti. Sebagai bagian dari proses untuk mempersiapkannya, ia menghentikan kode yang menganimasikan GIF. Saya ragu ada yang dapat Anda lakukan tentang hal itu (kecuali jika Anda tidak benar-benar menavigasi dalam hal ini gunakan return false di acara onclick).

Berikut adalah jsFiddle yang berfungsi dengan baik pada pengiriman formulir dengan method = "post". Spinner ditambahkan pada acara pengiriman formulir.

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

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

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

Lihat kode jsFiddle di sini

Uji di browser IE Anda di sini

Saya menemukan posting ini, dan meskipun sudah dijawab, saya merasa saya harus memposting beberapa informasi yang membantu saya dengan masalah ini khusus untuk IE 10, dan mungkin membantu orang lain yang tiba di posting ini dengan masalah serupa.

Saya bingung bagaimana gif animasi tidak ditampilkan di IE 10 dan kemudian menemukan permata ini.

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

semoga ini membantu.

Saya mengalami masalah ini saat mencoba menampilkan gif memuat saat pengiriman formulir sedang diproses. Itu memiliki lapisan kesenangan tambahan di mana pengiriman yang sama harus menjalankan validator untuk memastikan formulirnya benar. Seperti orang lain (pada setiap posting formulir IE / gif di internet) saya tidak bisa membuat pemintal pemuatan "berputar" di IE (dan, dalam kasus saya, memvalidasi / mengirimkan formulir). Saat mencari melalui saran di http://www.west-wind.com saya menemukan sebuah posting oleh ev13wt yang menyarankan masalahnya adalah "... bahwa IE tidak membuat gambar sebagai animasi karena tidak terlihat saat dirender. " Itu masuk akal. Solusinya:

Biarkan kosong di tempat gif akan pergi dan gunakan JavaScript untuk menyetel sumber dalam fungsi onsubmit - document.getElementById ('loadingGif'). Src = "jalur ke file gif".

Inilah cara saya menerapkannya:

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

Ini bekerja dengan baik untuk saya di semua browser!

Inilah yang saya lakukan. Yang harus Anda lakukan adalah memecah GIF Anda untuk mengatakan 10 gambar (dalam hal ini saya mulai 01.gifdan diakhiri dengan 10.gif) dan tentukan direktori tempat Anda menyimpannya.

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

Metode ini bekerja dengan IE7, IE8 dan IE9 (meskipun untuk IE9 Anda dapat menggunakan spin.js). CATATAN: Saya belum menguji ini di IE6 karena saya tidak memiliki mesin yang menjalankan browser dari tahun 60-an, meskipun metodenya sangat sederhana sehingga mungkin bekerja bahkan di IE6 dan yang lebih rendah.

Terkait dengan ini, saya harus menemukan perbaikan di mana gif animasi digunakan sebagai gambar latar belakang untuk memastikan gaya disimpan ke stylesheet. Perbaikan serupa juga berhasil untuk saya di sana ... skrip saya berjalan seperti ini (saya menggunakan jQuery untuk mempermudah mendapatkan gaya latar belakang yang dihitung - cara melakukannya tanpa jQuery adalah topik untuk posting lain):

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

[EDIT] Dengan sedikit pengujian lagi, saya baru menyadari bahwa ini tidak berfungsi dengan gambar latar belakang di IE8. Saya telah mencoba semua yang dapat saya pikirkan untuk membuat IE8 membuat animasi gif sambil memuat halaman, tetapi tampaknya tidak mungkin saat ini.

Berdasarkan jawaban @danfolkes, ini berhasil untuk saya di IE 8 dan ASP.NET MVC3.

Di _Layout.cshtml kami

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

<<< konten di sini >>> ...

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

Dan di tautan navigasi kami:

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

atau

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

Temukan solusi ini di http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html dan BEKERJA! Cukup muat ulang gambar sebelum menyetel ke terlihat. Panggil fungsi Javascript berikut dari onclick tombol Anda:

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

Saya menyadari bahwa ini adalah pertanyaan lama dan sekarang masing-masing poster asli telah menemukan solusi yang sesuai untuk mereka, tetapi saya menemukan masalah ini dan menemukan bahwa tag VML tidak menjadi korban bug IE ini. GIF animasi masih bergerak selama pembongkaran halaman saat ditempatkan di browser IE menggunakan tag VML.

Perhatikan Saya mendeteksi VML terlebih dahulu sebelum membuat keputusan untuk menggunakan tag VML sehingga ini berfungsi di FireFox dan browser lain yang menggunakan perilaku GIF animasi normal.

Inilah cara saya menyelesaikan ini.

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

Biasanya, ini bergantung pada jQuery, jQueryUI dan memerlukan beberapa jenis GIF animasi ("/images/loading_gray.gif").

Jquery:

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

Baru saja mengalami masalah serupa. Ini bekerja dengan sempurna untuk saya.

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

Ide lain adalah menggunakan jQuery's .load (); untuk memuat dan kemudian menambahkan gambar.

Bekerja di IE 7+

Sangat, sangat terlambat untuk menjawab pertanyaan ini, tetapi saya baru saja menemukan bahwa menggunakan gambar latar belakang yang dikodekan sebagai URI base64 di CSS, daripada disimpan sebagai gambar terpisah, terus dianimasikan di IE8.

Cara yang sangat mudah adalah dengan menggunakan plugin jQuery dan SimpleModal . Kemudian ketika saya perlu menunjukkan gif "memuat" saya saat mengirimkan, saya melakukan:

$('*').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} );

Saya memiliki masalah yang sama, umum juga pada borwser lain seperti Firefox. Akhirnya saya menemukan bahwa secara dinamis membuat elemen dengan gif animasi di dalam form submit tidak bernyawa, jadi saya mengembangkan workaorund berikut.

1) Di document.ready(), setiap FORMULIR yang ditemukan di halaman, menerima position:relativeproperti dan kemudian ke masing-masing terpasang yang tak terlihat DIV.bg-overlay.

2) Setelah ini, dengan asumsi bahwa setiap nilai pengiriman situs web saya diidentifikasi oleh btn-primarykelas css, sekali lagi document.ready(), saya mencari tombol-tombol ini, melintasi ke induk FORM masing-masing, dan pada pengiriman formulir, saya mengaktifkan showOverlayOnFormExecution(this,true);fungsi, melewati tombol yang diklik dan boolean yang mengubah visibilitas 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 untuk DIV.bg-overlayadalah sebagai berikut:

.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) Pada pengiriman formulir apa pun, fungsi berikut diaktifkan untuk menampilkan hamparan latar belakang semi-putih di atasnya (yang menolak kemampuan untuk berinteraksi lagi dengan formulir) dan gif animasi di dalamnya (yang secara visual menunjukkan tindakan pemuatan).

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

Menampilkan animasi gif pada pengiriman formulir, alih-alih menambahkannya di acara ini, memecahkan masalah "pembekuan animasi gif" di berbagai browser (seperti yang saya katakan, saya menemukan masalah ini di IE dan Firefox, bukan di Chrome)