IEでのアニメーションGIFの停止


109

IEでリンクをクリックするか、ページのフォームを送信した後も、アニメーションGIFをアニメーション化し続けるための回避策を知っている人はいますか?これは他のブラウザでも問題なく機能します。

ありがとう。


3
ここでの唯一の正しい答えは@AnthonyWJonesです。POSTの場合、実際の送信(ajaxではない)は機能しません。
P.Brian.Mackey

実際、それはまったく真実ではありません。タイムアウトを使用してonsubmitイベントの画像を表示することは、フォームPOSTで問題なく機能します。
oldwizard 2013年

@ P.Brian.Mackey-j.davisによるソリューションは、投稿リクエストでも機能しました。ただし、サーバー側のメソッドを呼び出すためにajaxcontrolツールキットも使用しています。その場合は機能しません。
Ankur-m 2014


ヨルダンの答えをここでチェックしてください。私はそれがより良い解決策であると思います、そしてそれはダウンレベルIEでも動作します。
Jason Kresowaty 14

回答:


99

受け入れられた解決策は私にとってはうまくいきませんでした。

さらに調査を重ねた結果この回避策を見つけましたが、実際に機能します。

その要点は次のとおりです。

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/>タグが挿入され、何らかの理由でieアニメーションの問題の影響を受けません。

Firefox、ie6、ie7、ie8でテスト済み。



8
コードでは、実際にPOSTを実行することはありません。"onclick =" JavaScript呼び出しのみ。[送信]をクリックしたときに期待どおりに動作しないPOSTでこれを試しました。
P.Brian.Mackey

onclickの最後にfalseを返さない限り、送信ボタンはPOSTをトリガーします。これが送信ボタンの機能です。
Frug、

2
-1この答えも間違っています。フォーム送信後のIE7とIE8のgif画像FREZEESでは機能しません。
Marco Demaio

2
これは、jQueryを使用して動作しました。ハックはかなり奇妙です、私は認めざるを得ません。これが私の例でどのように機能したかです。 code<div id = "img_content"> <img id = 'aj_loader' src = 'assets / 2631.gif' style = "display:none;" /> </ div>次に、 code$( "#img_content")。html($( "#img_content")。html());
misaizdaleka 2012年

35

古い質問ですが、仲間のグーグルのためにこれを投稿します:

Spin.jsはこのユースケースで機能します:http ://fgnass.github.com/spin.js/


修正、機能しますが、ページが読み込まれる直前にアニメーションが停止します。したがって、短いロードの場合、アニメーションは元の問題のようにフリーズしているように見えます。
James McMahon

優れたソリューションで、IE11で正常に動作するため、すべて最新でサポートされているようです。
アダム騎士

残念ながら、spin.jsは非常にCPUに負荷がかかります。「課題/ 8」、「課題/ 200」、「課題/ 215」を参照
user247702

iPhoneでは、Spin.jsが機能しません。また、ページが別のページにリダイレクトされるとすぐにフリーズします。
Ankur-m

18

IEでは、リンクをクリックすると、現在のページのコンテンツが置き換えられる新しいナビゲーションが開始されると想定しています。そのための準備プロセスの一部として、GIFをアニメーション化するコードを停止します。私はあなたがそれについて何ができるか疑わしいです(あなたが実際にナビゲートしていない場合を除いて、onclickイベントでreturn falseを使用してください)。


+1-私は両方のトップアンサーを試しました。どちらも機能しません。すべてのフォームをajaxリクエストに送信するつもりはありません。
P.Brian.Mackey

2
+1同意する、spin.jsとCodeMonkeyの回避策を除いて、これが唯一の正しい答えです。
Marco Demaio

7
そしてIE10でも
ChadT 2013

9
そしてまだIE11にあります!
bileyazan 14

2
2017チェックイン!
スティーブウェイクフォード2017

17

次に、method = "post"を使用したフォーム送信で正常に機能するjsFiddleを示します。スピナーはフォーム送信イベントで追加されます。

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

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

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

ここでjsFiddleコードを参照してください

こちらのIEブラウザでテストしてください


2
はい、これはうまく機能します(これまでのところIE 10でのみテストされています)。しかし、メモリに画像をプリロードするとアニメーションが停止する理由を理解できません。私はあなたのフィドルでプリロードすることができ、それはうまくいきます。
Simon East

あなたは何か間違ったことをしました。:)スピナー画像をimgタグとしてページに追加しますか?URLを更新しました。役立つかもしれません。
oldwizard 2013年

IEは単なるジャークです。プリロード時にアニメーションを停止します。jqueryを介して挿入されると、アニメーションは動き続けます。この解決策をありがとう。
アンソニー

8

私はこの投稿に出くわしましたが、既に回答されていますが、IE 10に固有のこの問題を解決するのに役立つ情報を投稿する必要があると感じました。

IE 10でアニメーションGIFが表示されないのに困惑し、この宝石を見つけました。

ToolsInternet OptionsAdvancedMultiMediaPlay animations in webpages

お役に立てれば。


いいえ、それはIE11の問題を解決しません(しかし、助けるために+1します)!:(それはある-私は、このオプションが有効になっていると示すとき、アニメーションGIFは、アニメーションされていないbeforeunloadか、unloadイベント。
trejder

1
これは問題で提起された問題とは何の関係もありません。
user247702

2

フォーム送信の処理中にローディング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>

これは、すべてのブラウザでうまく機能しました。


IE11では、srcの設定もうまくいきました。私の場合は、最初にimg htmlを再度追加することと組み合わせています。なぜ両方が必要なのかわかりません。「表示」を変更するのではなく、「表示」(ブロックする)も設定していることに注意してください。
Cfold

2

これが私がしたことです。あなたがしなければならないのは、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)。 注: 60年代からブラウザを実行しているマシンがないため、これはIE6でテストしていませんが、メソッドは非常に単純なので、IE6以下でも機能します。


1
この回避策は、スピンの同じ原理に基づいて機能し、jsは基本的にJS setTimeoutを使用してgifアニメーションをシミュレートします。
Marco Demaio、2012

1

これに関連して、スタイルシートにスタイルが維持されるように、アニメーション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アニメーションをレンダリングさせるために考えられるすべてのことを試みましたが、現時点では可能ではありません。


jQuery($(spinner).css('background-image'))を使用してCSSコードを読み取るのに、同じように設定するのではなく、純粋なJavascriptの方法(spinner.style.backgroundImage)を使用しているのはなぜですか。あなたのコードはどのブラウザでも機能しません。コードを直接使用すると、cannot set backgroundImage property of undefinedエラーが発生します。jQueryを使用してCSSを設定するようにコードを変更した場合、コードはエラーなしで実行されますが、画像はリセットされず、div / spinner要素は空のままです。なぜだかわかりません。
trejder 2014

確認済み!チャンスはありません、あなたのコードは動作します。何のブラウザではありませんではないセットに(2014年12月のような)ことbackground-imageでプロパティunloadbeforeunloadイベント。詳細については、この質問またはこのjsFiddleを参照してください。
trejder 2014

1

@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()" })

1

このソリューションはhttp://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.htmlで見つかり、うまくいきました!表示に設定する前に画像を再読み込みするだけです。ボタンのonclickから次の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';
}

0

これは古い質問であり、元の投稿者はそれぞれに有効な解決策を見つけたのですが、この問題に遭遇し、VMLタグはこのIEバグの犠牲にならないことがわかりました。アニメーションGIFは、VMLタグを使用してIEブラウザーに配置すると、ページのアンロード中にも移動します。

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")が必要です。



0

ちょうど同じような問題がありました。これらは私にとって完璧に機能しました。

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

別のアイデアは、jQueryの.load();を使用することでした。画像を読み込んでから追加します。

IE 7以降で動作


0

これに答えるのは非常に遅いですが、CSSでbase64 URIとしてエンコードされたbackground-imageを使用すると、個別の画像として保持されるのではなく、IE8でアニメーション化し続けることがわかりました。


0

非常に簡単な方法は、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} );

-1

私も同じ問題を抱えていましたが、Firefoxのような他のブラウザにも共通しています。最後に、フォームの送信時にアニメーションGIFを含む要素を動的に作成してもアニメーション化されないことを発見したので、次の回避策を開発しました。

1)でdocument.ready()、ページで見つかった各FORMは、position:relativeプロパティを受け取り、次にそれぞれに非表示が添付されますDIV.bg-overlay

2)この後、私のWebサイトの各送信値がbtn-primarycssクラスによって識別されていると仮定して、再びでdocument.ready()これらのボタンを探し、各ボタンのFORM親に移動し、フォーム送信で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アニメーションのフリーズ」問題を解決しました(この問題は、ChromeではなくIEとFirefoxで見つかりました)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.