1

私は以前にこれに対処してきましたが、問題が再発したようです。説明させてください。

ユーザーが大きなファイルをアップロードできる Web ページがあります。その後、ASP.NET サーバー側スクリプトがそれを処理するのに数秒かかる場合があります。それまでの間、ユーザーが送信ボタンを再度クリックするのを防ぐために、ローダー/スピナーのアニメーションを Web ブラウザーに表示したいと考えていました。

次の JQuery コードを使用しました。

$('#ButtonImportData').click(function () {
    $('.importSubmitSpinner').css('display', 'inline');
}

スピナー画像の HTML は次のとおりです。

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" />

CSSは次のとおりです。

.importSubmitSpinner
{
    margin: 0px 10px 0px 6px;
    width: 28px;
    height: 28px;
    display: none;
}

spinner_big.gif は、ページが読み込まれていることをユーザーに知らせるアニメーションを含む単純な GIF ファイルです。

上記のアプローチは、ほとんどすべてのブラウザーで機能しますが、... どれだと思いますか? はい、いえ！IE で何が起こるかというと、ユーザーが ButtonImportData ボタンをクリックした後、スピナーが表示されますが、アニメーションはすぐに停止します。基本的に、ページがハングアップしたという誤った指示をユーザーに与え、再度送信をクリックするよう促します。したかった。

私はかなり前に IE の使用をやめましたが、インターネット コミュニティの約半数がまだ IE を使用していることは明らかです。ああ、人々はその *&^% の一部をどのように使用できますか? とにかく、それは問題ではありません :) 問題は、この単純なタスクを IE で動作させ、アニメーションを実際に再生させる方法です。

PS。私はIE 9またはWindows 7の現在の「Webの美しさ」でそれをテストしてきました.

編集：

ShadowScripter のおかげで、解決策が見つかりました。これが私のために働いたものです：

1 HTML に以下を追加して、IE で実行しているかどうかを判断します (他の Web ブラウザではこの「ハック」を行う必要がないため)。

<![if !IE]>
<script type='text/javascript'>
var bNotIE = 1;
</script>
<![endif]>

2 ID を img 要素に追加する必要があります。

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" id="imgSpinnerImport" />

3 次に、GIF アニメーションを表示します。

$('#ButtonImportData').click(function () {
    //For "normal" browsers
    $('.importSubmitSpinner').show();

    if (typeof (bNotIE) == 'undefined') {
        //The following must be done only in case of IE
       //NOTE: We need to load the same file but with a different name
       //   because if you don't change the file name it won't work!
        setTimeout('document.images["imgSpinnerImport"].src = "Graphics/spinner_big_ie.gif"', 200);
    }
}
4

2 に答える 2

1

どの IE バージョンでも問題を再現できないようです。

これが私がテストした実際の例です。

機能しない理由はさまざまです。

  • 他のコードが干渉する可能性があります
  • GIF画像がおかしい
  • クライアント コンピューター。ワークロード

ああ、また、

.show()ことをする代わりに使用できます.css("display", "inline")。
JQuery は、何も指定されていない場合に要素が持つべきデフォルトの表示モードを識別できます。

于 2012-04-10T10:41:23.693 に答える