110

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

ありがとう。

4

16 に答える 16

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

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

于 2009-12-15T02:58:37.303 に答える
35

古い質問ですが、仲間のグーグル社員のためにこれを投稿してください：

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

于 2011-08-22T17:58:28.303 に答える
18

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

于 2009-04-23T07:12:01.293 に答える
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 ブラウザでテストしてください

于 2013-01-24T08:53:06.400 に答える
8

この投稿にたどり着きましたが、すでに回答されていますが、IE 10 に固有のこの問題を解決するのに役立つ情報を投稿する必要があると感じました。

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

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

お役に立てれば。

于 2013-12-26T17:32:35.380 に答える
2

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

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>

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

于 2013-01-07T19:28:38.043 に答える
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 以前でも機能します。

于 2012-01-28T22:42:44.283 に答える
2

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';
}
于 2015-11-20T16:24:14.057 に答える
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 アニメーションをレンダリングさせるために考えられるすべてのことを試みてきましたが、現時点では不可能に見えます。

于 2010-09-28T11:21:18.877 に答える
0

Jクエリ:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
于 2012-07-02T18:59:37.987 に答える
0

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

于 2013-12-03T14:48:00.367 に答える
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 以降で動作

于 2013-01-10T10:46:48.833 に答える
-1

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

1) でdocument.ready()、ページにある各 FORM がposition:relativeプロパティを受け取り、それぞれに非表示の が添付されDIV.bg-overlayます。

2) この後、私のウェブサイトの各送信値が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);
  });
});

CSSDIV.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 でこの問題が見つかりました)。

于 2015-02-02T09:28:53.910 に答える