2

Jquery を使用してフォーム送信時に div を非表示/表示しています - フォームを非表示にし、「読み込み中...」のテキストとアニメーションを表示します。Internet Explorer (私のバージョンは 9.0) を除くすべてのブラウザで正常に動作します。Internet Explorer では、背景アニメーションはアニメーション化されず、静的 gif として表示されます。この問題を解決する方法はありますか?

背景アニメーションは、@ http://www.ajaxload.info/ Web サイトで生成されました。

脚本：

<script type="text/javascript">                                         
$(document).ready(function(){
    $("#enf").submit(function(){
        $('#formdiv').hide();
        $('#wait').show();    
    });
});
</script>

形

    <div id="formdiv">
    <form id="enf" name="enf" enctype="multipart/form-data" action="/upload4.php" method="post">
        ......form elements.......
        <input type="submit" value="Send" name="add" />
    </form>
    </div>
    <div id="wait">Please wait...</div>

css ファイル:

#wait{
    display:none;
    text-align:center;
    float:left;
    width:778px;
    background:#fdfdfd url('/loading.gif') no-repeat center center;padding:60px 0 20px 0;
}
4

1 に答える 1

3

これは古い質問であることは知っていますが、今日同じ問題に遭遇しました。imgこれは、アニメーション化されていない（タグではなく）CSS背景固有の画像に対する私の解決策です。IE8、IE9、および最新バージョンの Firefox と Chrome で動作します。

JavaScript:

$(function () {
    var submitButton = $('input[type="submit"]');
    submitButton.button('enable');
    submitButton.after('<span class="spinner"></span>');
    submitButton.parents('form:first').submit(function () {
        submitButton.button('disable');
        window.setTimeout("ieSpinnerFix()", 25);
    });
});

function ieSpinnerFix() {
    $('.spinner').css('background', 'url(/Content/Common/Images/ajax-loader.gif) no-repeat center left');
    $('.spinner').show();
    window.setTimeout("anyOtherFunctions()", 5000);
}

function anyOtherFunctions() {
    $('.spinner').text('We are processing your request, please stand by for awesomeness.');
}

HTML:

<form action="/Search" method="post">
    <div class="pageNav">
        <input type="submit" value="Search" />
    </div>
</form>

CSS スタイル:

.spinner {
    display: none;
    padding-left: 20px;
    background: url('/Content/Common/Images/ajax-loader.gif') no-repeat center left;
    margin: auto 10px;
}

アイデアは、イニシャルsetTimeoutにより、フォームを送信した後にブラウザーが落ち着くことができるということです。タイムアウトが短すぎると、Chrome で奇妙な問題が発生しました。バックグラウンド CSS の への再適用は、他の投稿で参照されているタグの修正に似ています。

于 2013-04-17T13:57:44.947 に答える