web-dev-qa-db-ja.com

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

IEでリンクをクリックするか、ページでフォームを送信した後、アニメーションGIFをアニメーション化し続ける方法を知っている人はいますか？これは、他のブラウザーでは正常に機能します。

ありがとう。

internet-explorergifanimated-gif
108
mattt

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

さらにいくつかの調査の後、 この回避策 に出会い、実際に動作します。

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

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、ie6、ie7、ie8でテスト済み。

97
j.davies

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

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

35
Entendu

IEは、リンクをクリックすると、現在のページのコンテンツが置き換えられる新しいナビゲーションが開始されると想定しています。そのための処理の一環として、GIFをアニメーション化するコードを停止します。私はあなたがそれについて何もできるとは思いません（実際にナビゲートしていない限り、onclickイベントでreturn falseを使用してください）。

18
AnthonyWJones

次に、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ブラウザーでテストしてください

17
oldwizard

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

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

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

お役に立てれば。

8
funkymushroom

フォーム送信の処理中にロードGIFを表示しようとすると、この問題が発生しました。フォームが正しいことを確認するために同じonsubmitがバリデーターを実行する必要があるという点で、追加の楽しみがありました。他の皆と同じように（インターネット上のすべてのIE/gifフォーム投稿で）IE（そして、私の場合、フォームの検証/送信）でロードスピナーを「スピン」させることができませんでした。 http://www.west-wind.com のアドバイスを見ていると、問題が「... that IEが表示されない」というev13wtの投稿を見つけました。アニメーション化された画像は、レンダリングされたときに見えませんでした。」それは理にかなっています。彼の解決策：

gifが行く場所を空白のままにし、JavaScriptを使用してonsubmit関数でソースを設定します-document.getElementById（ 'loadingGif'）。src = "gifファイルへのパス"。

実装方法は次のとおりです。

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

これはすべてのブラウザでうまくいきました！

2
lostphilosopher

これが私がしたことです。必要なのは、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以前。

2
techouse

このソリューションは 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';
}
1
Dan H.

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

1
CodeMonkey

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

Jquery：

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

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

同様の問題が発生しました。これらは私にとって完璧に機能しました。

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

もう1つのアイデアは、jQueryの.load（）;を使用することです。イメージをロードしてから追加します。

IE 7+で動作

0
user815968

これは古い質問であり、元のポスターはそれぞれに有効な解決策を見つけていることを認識していますが、この問題に出くわし、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
David

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

0
Mark