web-dev-qa-db-ja.com

送信フォームがJQueryの実行中にロードgifを表示する方法

送信が実行されている間、単純なスピナーgifを表示しようとしています（Webサービスを介してプロバイダーとの通信を確立する必要があるため、少し時間がかかります）。

だから、私はこれを持っています：

$('#gds_form').submit(function() {
        var pass = true;
        //some validations

        if(pass == false){
            return false;
        }

        $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>');
        $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>");
        return true;
    });

つまり、.gifにはアニメーションが表示されず、フリーズしているように見えます。

どうして？

これを実装する別の方法があります（AJAXを使用しておらず、使用したくないことに注意してください）？

ありがとうございました。

jqueryloadingform-submit
9
content01

すぐにドキュメントに画像をロードしてみて、非表示にしてみましたか？次に、それを関数に表示しますか？このようにして、イメージはすでにロードされて回転しています。

$(document).ready(function() {
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>");
});

$('#gds_form').submit(function() {
    var pass = true;
    //some validations

    if(pass == false){
        return false;
    }
    $("#overlay, #PleaseWait").show();

    return true;
});
11
Challe

JQuery submit関数を使用して、次のようにロードするイメージを指定できます。

$('#form').submit(function() {
    $('#wait').show();
    $.post('/somepage.htm', function() {
        $('#wait').hide();
    });
    return false;
});
13
James Johnson

実装の本当の問題は、リクエストがいつ完了したかをクライアント側がどのように知るかです。 Ajaxが役立つ理由の1つは、状態の概念があるため、クライアントが応答を待っている間にローダーを表示し、クライアントが応答を受け取ったときにローダーを削除できるためです。

Webサービスとの通信がいつ完了したかをどのように判断しますか？あなたはAjaxを使いたくないと言いますが、通信を完了したかどうかを判断するためにサービスを照会したい場合は、おそらくAjaxを必要とするものを見ているでしょう。

1
Jose Vega

.show（）および.hide（）を使用して、送信中にアニメーションの読み込みを切り替えますか？

0
Hazza

私は最初にページのdivを使用しますが、_style='display:none'_を使用して、コードに$('#PleaseWait').show()を表示させたいときに貼り付けます。

_display:none_をオフのままにすると、フォームを何度も送信しなくても、編集して外観を確認できます。

NB：便宜上、オーバーレイとgifを親divでラップすることができます。

0
Ben