GIF animasi di IE berhenti

109

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.

mattt
sumber
3
Satu-satunya jawaban yang benar di sini adalah @AnthonyWJones. Untuk POST, pengiriman sebenarnya (bukan ajax) tidak ada yang berfungsi.
P. Brian.Mackey
Sebenarnya itu tidak benar sama sekali. Menggunakan waktu tunggu untuk menampilkan gambar pada acara onsubmit berfungsi dengan baik dengan formulir POST.
oldwizard
@ P.Brian.Mackey - solusi oleh j.davis bekerja untuk saya bahkan untuk permintaan posting. Namun kami juga menggunakan ajaxcontrol toolkit untuk melakukan panggilan ke metode sisi server. Itu tidak berhasil dalam kasus itu.
Ankur-m
kemungkinan duplikat gif animasi Kemajuan Pembaruan berhenti di pos balik
Jason Kresowaty
Lihat jawaban Jourdan di sini . Saya pikir ini adalah solusi yang lebih baik dan bekerja pada IE downlevel juga.
Jason Kresowaty

Jawaban:

99

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.

j. virus
sumber
8
Dalam kode Anda, Anda tidak pernah benar-benar melakukan POST. Hanya panggilan javascript "onclick =". Saya mencoba ini dengan POST seperti yang diharapkan ketika Anda mengklik kirim dan tidak berhasil.
P. Brian.Mackey
Kecuali Anda mengembalikan false di akhir onclick Anda, tombol kirim akan memicu POST. Itulah yang dilakukan tombol kirim.
Frug
2
-1 Jawaban ini SALAH juga. Ini tidak berfungsi di IE7 dan IE8 gambar gif FREZEES setelah pengiriman formulir.
Marco Demaio
2
Ini berhasil untuk saya menggunakan jQuery. Peretasan itu cukup aneh, saya harus akui. Beginilah cara kerjanya dalam contoh saya: code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display: none;" /> </div> Lalu: code$ ("# img_content"). html ($ ("# img_content"). html ());
misaizdaleka
35

pertanyaan lama, tapi posting ini untuk sesama karyawan Google:

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

Entendu
sumber
Koreksi, ini berfungsi tetapi berhenti beranimasi tepat sebelum halaman dimuat. Jadi jika loadingnya pendek sepertinya animasinya macet seperti di edisi aslinya.
James McMahon
Solusi hebat, berfungsi dengan baik di ie11 sehingga semuanya tetap up-to-date dan didukung.
Adam Knights
spin.js sayangnya cukup intensif menggunakan CPU. Lihat terbitan / 8 , terbitan / 200 , terbitan / 215
user247702
Spin.js tidak berfungsi untuk saya di iPhone. Itu juga macet segera setelah halaman dialihkan ke halaman lain.
Ankur-m
18

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

AnthonyWJones
sumber
+1 - Saya mencoba kedua jawaban teratas. Tidak ada yang berhasil. Saya tidak akan membuat semua pengiriman Formulir saya menjadi permintaan ajax.
P. Brian.Mackey
2
+1 Saya setuju, ini adalah satu-satunya jawaban yang benar, kecuali untuk solusi spin.js dan CodeMonkey.
Marco Demaio
7
Dan masih di IE10
ChadT
9
Dan masih di IE11!
bileyazan
2
2017 check in!
Steve Wakeford
17

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

penyihir tua
sumber
2
Ya, ini berfungsi dengan baik (sejauh ini hanya diuji di IE 10). Tapi saya tidak tahu mengapa animasi dihentikan saat saya melakukan pramuat gambar di memori. Saya dapat melakukan pramuat di biola Anda dan berfungsi dengan baik, hanya saja tidak dalam kode saya, argh.
Simon East
Anda melakukan sesuatu yang salah. :) Tambahkan gambar spinner sebagai tag img ke halaman Anda? Saya telah memperbarui url. Mungkin membantu.
oldwizard
IE sepertinya hanya brengsek. Menghentikan animasi saat dimuat sebelumnya. Saat disuntikkan melalui jquery, animasi akan terus berjalan. Terima kasih untuk solusi ini.
Anthony
8

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.

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

semoga ini membantu.

funkymushroom
sumber
Tidak, itu tidak menyelesaikan masalah di IE11 (tapi +1 untuk mencoba membantu)! :( Artinya - Saya telah mengaktifkan opsi ini dan animasi GIF tidak dianimasikan, saat ditampilkan dalam beforeunloadatau unloadacara.
trejder
1
Ini tidak ada hubungannya dengan masalah yang diajukan dalam pertanyaan tersebut.
pengguna247702
2

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!

lostphilosopher
sumber
Pengaturan src bekerja untuk saya juga di IE11. Dalam kasus saya, ini dikombinasikan dengan menambahkan kembali img html terlebih dahulu. Saya tidak yakin mengapa saya membutuhkan keduanya. Menarik untuk dicatat bahwa saya juga menyetel 'tampilan' (untuk memblokir), bukan mengubah 'visibilitas'.
Cfold
2

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.

Klemen Tušar
sumber
1
Solusi ini berfungsi, berdasarkan prinsip spin yang sama, js pada dasarnya menggunakan JS setTimeout untuk mensimulasikan animasi gif.
Marco Demaio
1

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.

CodeMonkey
sumber
Mengapa Anda membaca kode CSS menggunakan jQuery ( $(spinner).css('background-image')), tetapi alih-alih menyetelnya dengan cara yang sama, Anda menggunakan cara Javascript murni ( spinner.style.backgroundImage). Kode Anda tidak berfungsi untuk saya di browser mana pun. Jika saya menggunakan kode Anda secara langsung, maka saya mendapatkan cannot set backgroundImage property of undefinedkesalahan. Jika saya mengubah kode Anda untuk mengatur CSS menggunakan jQuery, kode berjalan tanpa kesalahan apa pun, tetapi gambar tidak disetel ulang dan elemen div / spinner tetap kosong. Saya tidak tahu, kenapa?
trejder
Terverifikasi ! Tidak ada kemungkinan, kode Anda akan berfungsi. Tidak ada browser yang tidak dapat (per Desember 2014) untuk mengaturbackground-imageproperti diunloadataubeforeunloadacara. Lihat pertanyaan ini atau jsFiddle ini untuk detailnya.
trejder
1

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()" })
Kit
sumber
1

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';
}
Dan H.
sumber
0

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

David
sumber
0

Jquery:

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

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+


sumber
0

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.

Menandai
sumber
0

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} );
Matt Roy
sumber
-1

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)

Luca Detomi
sumber